AstryxDesign Skills

For any project on the Astryx design system (@astryxdesign/core, 148 components). The default failure of AI-built UI is using ten components flatly. This skill teaches the build → render → LOOK → refine loop: balance and polish are visual properties you can't reason your way to from code alone.

• The grounding step: run the CLI manifest first so the agent works from real capabilities, not half-remembered syntax
• Layout discipline reference: the rules that keep grids balanced and rows from overflowing
• Richness reference: depth, motion, typographic hierarchy, and accent color as named, concrete moves — not 'make it pop'
• Show-off components reference: the pieces that make a page feel like a real product
• Evals included so you can verify the skill actually improves output

Audits any React/Next/Vue/Svelte + Tailwind codebase for the design patterns that make a UI look machine-generated. This is the newest version — it goes far beyond purple gradients.

• Classic slop: the #667eea→#764ba2 hero gradient, glassmorphism, Inter-everywhere, card-on-everything, emoji headings, 'Supercharge your workflow' copy
• Anti-slop slop: the editorial/luxury costume models flee to when told to avoid gradients — fake heritage, Didone serifs, film grain
• The dark dev-tool variant: near-black canvas, one terracotta accent, tilted cards full of fabricated community content
• The 'tasteful-middle' wave: serif-italic accent words, vibe-lavender, colored card edges, badge-above-H1
• Includes a runnable scanner (scan.py) plus a judgment-based pattern library for what regex can't catch

AI coding agents ship UIs that all look the same. Clients notice. These two skills give your agent taste enforcement: one pushes toward genuinely good design, the other blocks the recognizable clichés. Run the slop detector before shipping anything client-facing.