← All skills
astryx-design-system
82 / 100 · Low risk
Fine to try.
By wso2/labs-agentic-engineer (GitHub) · design · 24 stars · scanned at commit e3b5fc8
Astryx (`@astryxdesign/core`) — a web-app design system this library keeps available, covering its Theme + StyleX wiring, the organization's settled brand colors, and the CLI you confirm every component's props against before writing JSX. Apply to all UI work in a `web-application` that pins it — pages, layouts, forms, tables, dialogs, nav, theming — even when the task never names Astryx.
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 16 places.
Show 13 more
- skills/astryx-design-system/SKILL.md, line 140
npx --no astryx theme build src/theme/brandTheme.ts -o src/theme/brand.css - skills/astryx-design-system/SKILL.md, line 179
before `npx tsc --noEmit`: - skills/astryx-design-system/SKILL.md, line 182
npx --no astryx doctor - skills/astryx-design-system/SKILL.md, line 227
2. **Run `npx --no astryx component <Name> --dense` before using ANY component**, - skills/astryx-design-system/SKILL.md, line 230
3. **Search before building.** Run `npx --no astryx search "<thing>"` when unsure - skills/astryx-design-system/SKILL.md, line 240
`npx --no astryx docs tokens --dense`; use the CSS-var color tokens and - skills/astryx-design-system/SKILL.md, line 243
`npx --no astryx template --list` and `npx --no astryx template <name> - skills/astryx-design-system/SKILL.md, line 269
`npx --no astryx component --list` for every component grouped by category, or - skills/astryx-design-system/SKILL.md, line 270
`npx --no astryx search` when nothing here fits. - skills/astryx-design-system/SKILL.md, line 276
| Astryx components render unstyled/unthemed | `reset.css`/theme CSS not imported, or imported after other global CSS without layer ordering | Import reset + th - skills/astryx-design-system/SKILL.md, line 280
| A prop doesn't exist, or is the old spelling | Answered from memory instead of the CLI | Run `npx --no astryx component <Name> --dense` — the CLI reflects the - skills/astryx-design-system/SKILL.md, line 281
| Every row in a list is wrapped in its own `Card` | Defaulted to a generic "card grid" instead of checking data density | `npx --no astryx docs principles --de - skills/astryx-design-system/SKILL.md, line 282
| Brand colors are set, deployed app is stock-themed | Colors were read but never compiled into a theme, or `brandTheme.ts` was edited without re-running `theme
Runs commands on your computer
This is disclosed by the author in the skill's SKILL.md or README.
Found in 3 places.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'astryx-design-system' ] || [ -L ~/.agents/skills/'astryx-design-system' ]; then echo 'A skill folder named astryx-design-system already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/wso2/labs-agentic-engineer' "$d" && git -C "$d" checkout --quiet 'e3b5fc8668f26761380b2d4965719f2d8f2eb246' -- 'skills/astryx-design-system' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/astryx-design-system' ~/.agents/skills/'astryx-design-system' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'astryx-design-system' ~/.claude/skills/'astryx-design-system' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for wso2/labs-agentic-engineer shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/wso2/labs-agentic-engineer/)
Score history
| Date | Version | Score |
|---|
| 2026-11-10 | e3b5fc8 | 82 |
| 2026-11-07 | 745aedc | 82 |