Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add commands/existential-birds/amelia/review-css-complexitygit clone --depth 1 https://github.com/existential-birds/ameliaWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00021 | $0.00384 |
| Opus 5 | $0.00010 | $0.00192 |
| Sonnet 5 | $0.00004 | $0.00077 |
| Haiku 4.5 | $0.00002 | $0.00038 |
Grade A, and why
review-css-complexity scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Scan the codebase for overly complex CSS and styling patterns. Look for:
Red Flags
-
Absolute positioning with placeholders - If you see absolute positioning combined with invisible placeholder elements to maintain layout, it's probably overcomplicated. Use flexbox/grid instead.
-
Complex width/height calculations - Formulas like
width: ${(hasMore ? visibleCount + Math.min(3, hiddenCount) - 1 : visibleCount - 1) * 16 + 120}pxare a code smell. Use CSS variables or simpler layouts. -
Nested positioning contexts - Multiple layers of relative/absolute positioning that could be flattened.
-
Transform calculations - Complex
translateX/translateYcalculations when simple flexbox/grid would work. -
Manual spacing calculations - Computing gaps/offsets manually instead of using CSS gap, space-x, or margins.
What to Look For
Search for files containing:
style={{with complex JavaScript expressions- Multiple layers of
absoluteandrelativepositioning - Placeholder divs with
opacity-0used for layout - Calculations involving multiple conditional operators in inline styles
- Comments explaining complex positioning logic (if it needs explaining, it's too complex)
Good Alternatives
- Flexbox with
-space-x-*for overlapping elements - CSS Grid for complex layouts
- CSS custom properties for dynamic values
- Tailwind utility classes over inline styles
Output
For each file with issues:
- File path and line numbers
- What's overcomplicated
- Suggested simpler approach
- Estimated complexity reduction (high/medium/low priority)
Focus on dashboard/src and amelia frontend code.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 45 lines · 21 tokens per session scan A 66421aeb7d8b
review-css-complexity is a command published in the GitHub repository existential-birds/amelia (21 stars, last pushed 23d ago), licensed Apache-2.0. It adds 21 tokens to every session and 384 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other commands, from other repositories
design-context-extract
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…
verify
Grade work that already exists and decide whether it can merge. Runs the project's current unit, integration, and E2E suites plus security scanning and type checking, scores every dimension 0-10, and returns a merge verdict with a VERIFIED-vs-CLAIMED evidence manifest. Writes no test files and edits no source. Use…
auto
Intent-classified router, the front door to OrchestKit and the DEFAULT entry point for any goal-shaped request. Classifies a plain-English goal and routes it to the right specialist skill. Routing is never overhead, so use it even when the target skill seems obvious; skip only when already executing inside another…
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…
polish
Final quality pass: alignment, spacing, consistency, design system adherence, typography, interaction states, and code cleanup. Replaces polish + normalize + distill.
ux-evolve
Auto-iterate the lint→polish→re-lint loop on a generated artifact until score crosses 90 or plateaus. Triggers on "polish this", "evolve this surface", "improve until score 90+", "auto-fix", "run the loop". Use when the user has a freshly generated surface that needs automatic refinement to ship-ready quality. Skip…