Frontend Token Usage Auditor
Compare source CSS with approved tokens; list hardcoded or undefined values.
Live component
Load the worked example or open your own input.
Start with the worked example. Edit your input or settings, inspect the result, and open Export for task files or a complete ZIP. Save project keeps editable text and settings; image/file projects need their original source files when reopened.
Using Frontend Token Usage Auditor
Compare source CSS with approved tokens; list hardcoded or undefined values.
- Select Try example to see a complete frontend token usage auditor workflow. Use the editable worked example as the JSON structure, or open a local JSON/YAML text fixture. File inspectors accept their stated local formats.
- Adjust the labelled controls or open Input/Geometry to change the evidence. Run workflow applies the current input; undo and redo restore text/settings decisions.
- Inspect the task preview, record details and method notes. Findings describe cases that need review; missing evidence remains unknown.
- Open Export for task artifacts, JSON/CSV results or a complete ZIP. Save project keeps input/settings; projects with local binary files need their original files to be reselected when reopened.
Example
The worked example for Frontend Token Usage Auditor produces 3 evidence records and 2 task artifacts. Parses local CSS with the existing CSS Tree library. Only supplied approved tokens define the inventory; var() scope, inherited definitions and computed values are not inferred.
Questions & answers
What does Frontend Token Usage Auditor do?
Parses local CSS with the existing CSS Tree library. Only supplied approved tokens define the inventory; var() scope, inherited definitions and computed values are not inferred.
What should I open or paste?
Use the editable worked example as the JSON structure, or open a local JSON/YAML text fixture. File inspectors accept their stated local formats. The worked example defines the supported input fields. Edit its values, run the workflow and inspect the method notes before exporting. Each selected file must be nonempty and at most 25 MiB, with at most 30 files and 80 MiB total. Image jobs use up to 12 still frames, six million pixels per image and 18 million total pixels. Individual format inspectors may apply stricter limits.
What results can I export?
The Export view includes the task-specific artifacts listed for your actual result, a typed JSON report, a CSV table and a complete ZIP. Save project stores editable input and settings; selected binary sources are represented by fingerprints and must be reselected. Secret-option values are excluded from saved projects.
Does it upload files, run commands or change a live system?
Processing uses your supplied evidence in this browser. Generated components are integration starters; application actions need your own implementation. Public pages include the site’s approved advertising and optional consent-based analytics.
Related tools
A useful next step for your task.
Developer & DataDesign Tokens & Theme WorkbenchFull workspaceBuild a reusable design system with typed tokens, light and dark themes, references, component previews, palette and type scales, contrast checks…
Images & DesignUI Wireframe & Prototype BuilderFull workspaceDesign multi-screen website and app wireframes with draggable components, layers, alignment tools and clickable navigation. Preview the flow and…
Developer & DataImage Comparison Slider BuilderBuild before-after handles with keyboard support, labels and responsive ratios.
Developer & DataResponsive Masonry ProofingCompare supported grid strategies with real image ratios and stable loading space.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.