design-agent-skills 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +380 -0
- package/VERSION +1 -0
- package/bin/cli.mjs +45 -0
- package/bootstrap.sh +32 -0
- package/install.sh +689 -0
- package/package.json +36 -0
- package/skills/accessibility-agents/SKILL.md +52 -0
- package/skills/accessibility-agents/stub.yaml +5 -0
- package/skills/accessibility-catalogue/SKILL.md +45 -0
- package/skills/accessibility-catalogue/stub.yaml +3 -0
- package/skills/addyosmani-quality/SKILL.md +72 -0
- package/skills/addyosmani-quality/stub.yaml +6 -0
- package/skills/ai-graphic-design-skill/SKILL.md +65 -0
- package/skills/ai-graphic-design-skill/stub.yaml +5 -0
- package/skills/algorithmic-art/SKILL.md +59 -0
- package/skills/algorithmic-art/stub.yaml +5 -0
- package/skills/animate-css-skill/SKILL.md +55 -0
- package/skills/animate-css-skill/stub.yaml +5 -0
- package/skills/animate-skill/SKILL.md +64 -0
- package/skills/animate-skill/stub.yaml +5 -0
- package/skills/anthropics-skills/SKILL.md +72 -0
- package/skills/anthropics-skills/stub.yaml +12 -0
- package/skills/antvis-chart-skills/SKILL.md +61 -0
- package/skills/antvis-chart-skills/stub.yaml +6 -0
- package/skills/apple-hig-skills/SKILL.md +66 -0
- package/skills/apple-hig-skills/stub.yaml +6 -0
- package/skills/baseline-ui/SKILL.md +54 -0
- package/skills/baseline-ui/stub.yaml +5 -0
- package/skills/bencium-ux-designer/SKILL.md +54 -0
- package/skills/bencium-ux-designer/stub.yaml +5 -0
- package/skills/brand-design-md/SKILL.md +65 -0
- package/skills/brand-design-md/stub.yaml +5 -0
- package/skills/callstack-agent-skills/SKILL.md +56 -0
- package/skills/callstack-agent-skills/stub.yaml +6 -0
- package/skills/cc-slidev/SKILL.md +54 -0
- package/skills/cc-slidev/stub.yaml +5 -0
- package/skills/claud3/SKILL.md +54 -0
- package/skills/claud3/stub.yaml +5 -0
- package/skills/claude-pm-skills/SKILL.md +53 -0
- package/skills/claude-pm-skills/stub.yaml +5 -0
- package/skills/claude-wireframe-skill/SKILL.md +63 -0
- package/skills/claude-wireframe-skill/stub.yaml +5 -0
- package/skills/claude2figma/SKILL.md +54 -0
- package/skills/claude2figma/stub.yaml +5 -0
- package/skills/claudedesignskills/SKILL.md +59 -0
- package/skills/claudedesignskills/stub.yaml +5 -0
- package/skills/cloudai-threejs/SKILL.md +51 -0
- package/skills/cloudai-threejs/stub.yaml +6 -0
- package/skills/cloudflare-web-perf/SKILL.md +60 -0
- package/skills/cloudflare-web-perf/stub.yaml +5 -0
- package/skills/color-expert/SKILL.md +62 -0
- package/skills/color-expert/stub.yaml +5 -0
- package/skills/composio-artifacts/SKILL.md +63 -0
- package/skills/composio-artifacts/stub.yaml +5 -0
- package/skills/content-catalogue/SKILL.md +105 -0
- package/skills/content-catalogue/stub.yaml +3 -0
- package/skills/coreyhaines-marketing/SKILL.md +59 -0
- package/skills/coreyhaines-marketing/stub.yaml +6 -0
- package/skills/creative-director/SKILL.md +60 -0
- package/skills/creative-director/stub.yaml +5 -0
- package/skills/css-animation-skill/SKILL.md +63 -0
- package/skills/css-animation-skill/stub.yaml +5 -0
- package/skills/d3js-skill/SKILL.md +58 -0
- package/skills/d3js-skill/stub.yaml +5 -0
- package/skills/data-analysis-skill/SKILL.md +64 -0
- package/skills/data-analysis-skill/stub.yaml +5 -0
- package/skills/data-viz-agent/SKILL.md +60 -0
- package/skills/data-viz-agent/stub.yaml +5 -0
- package/skills/deanpeters-pm-skills/SKILL.md +76 -0
- package/skills/deanpeters-pm-skills/stub.yaml +6 -0
- package/skills/design-auditor/SKILL.md +62 -0
- package/skills/design-auditor/stub.yaml +5 -0
- package/skills/design-brief/SKILL.md +58 -0
- package/skills/design-brief/stub.yaml +5 -0
- package/skills/design-catalogue/SKILL.md +346 -0
- package/skills/design-catalogue/stub.yaml +3 -0
- package/skills/design-consultation/SKILL.md +58 -0
- package/skills/design-consultation/stub.yaml +5 -0
- package/skills/design-engineering-catalogue/SKILL.md +92 -0
- package/skills/design-engineering-catalogue/stub.yaml +3 -0
- package/skills/design-for-ai/SKILL.md +58 -0
- package/skills/design-for-ai/stub.yaml +5 -0
- package/skills/design-html/SKILL.md +59 -0
- package/skills/design-html/stub.yaml +5 -0
- package/skills/design-lab/SKILL.md +54 -0
- package/skills/design-lab/stub.yaml +5 -0
- package/skills/design-review-garrytan/SKILL.md +58 -0
- package/skills/design-review-garrytan/stub.yaml +5 -0
- package/skills/design-tokens-skill/SKILL.md +68 -0
- package/skills/design-tokens-skill/stub.yaml +5 -0
- package/skills/design-with-claude/SKILL.md +51 -0
- package/skills/design-with-claude/stub.yaml +5 -0
- package/skills/designer-skills/SKILL.md +52 -0
- package/skills/designer-skills/stub.yaml +5 -0
- package/skills/digidai-pm/SKILL.md +60 -0
- package/skills/digidai-pm/stub.yaml +5 -0
- package/skills/distinctive-frontend/SKILL.md +55 -0
- package/skills/distinctive-frontend/stub.yaml +5 -0
- package/skills/email-html-mjml/SKILL.md +54 -0
- package/skills/email-html-mjml/stub.yaml +5 -0
- package/skills/emilkowalski-skill/SKILL.md +60 -0
- package/skills/emilkowalski-skill/stub.yaml +7 -0
- package/skills/excalidraw-agents365/SKILL.md +56 -0
- package/skills/excalidraw-agents365/stub.yaml +5 -0
- package/skills/excalidraw-diagram/SKILL.md +58 -0
- package/skills/excalidraw-diagram/stub.yaml +5 -0
- package/skills/expo-skills/SKILL.md +56 -0
- package/skills/expo-skills/stub.yaml +21 -0
- package/skills/extract-design-md/SKILL.md +58 -0
- package/skills/extract-design-md/stub.yaml +5 -0
- package/skills/extract-design-system/SKILL.md +53 -0
- package/skills/extract-design-system/stub.yaml +5 -0
- package/skills/fal-ai-skills/SKILL.md +56 -0
- package/skills/fal-ai-skills/stub.yaml +6 -0
- package/skills/figma-catalogue/SKILL.md +57 -0
- package/skills/figma-catalogue/stub.yaml +3 -0
- package/skills/figma-official-skills/SKILL.md +80 -0
- package/skills/figma-official-skills/stub.yaml +6 -0
- package/skills/figma-skill/SKILL.md +52 -0
- package/skills/figma-skill/stub.yaml +5 -0
- package/skills/figma-variables-tokens-generator/SKILL.md +54 -0
- package/skills/figma-variables-tokens-generator/stub.yaml +5 -0
- package/skills/fixing-accessibility/SKILL.md +54 -0
- package/skills/fixing-accessibility/stub.yaml +5 -0
- package/skills/fixing-motion-performance/SKILL.md +54 -0
- package/skills/fixing-motion-performance/stub.yaml +5 -0
- package/skills/framer-motion-skills/SKILL.md +55 -0
- package/skills/framer-motion-skills/stub.yaml +5 -0
- package/skills/frontend-design/SKILL.md +65 -0
- package/skills/frontend-design/stub.yaml +5 -0
- package/skills/frontend-slides/SKILL.md +59 -0
- package/skills/frontend-slides/stub.yaml +5 -0
- package/skills/generative-media-skills/SKILL.md +56 -0
- package/skills/generative-media-skills/stub.yaml +4 -0
- package/skills/google-fonts-skill/SKILL.md +69 -0
- package/skills/google-fonts-skill/stub.yaml +4 -0
- package/skills/google-stitch-skills/SKILL.md +71 -0
- package/skills/google-stitch-skills/stub.yaml +6 -0
- package/skills/gsap-skills/SKILL.md +55 -0
- package/skills/gsap-skills/stub.yaml +5 -0
- package/skills/guizang-ppt/SKILL.md +58 -0
- package/skills/guizang-ppt/stub.yaml +5 -0
- package/skills/hand-drawn-diagrams/SKILL.md +57 -0
- package/skills/hand-drawn-diagrams/stub.yaml +5 -0
- package/skills/hig-doctor/SKILL.md +59 -0
- package/skills/hig-doctor/stub.yaml +6 -0
- package/skills/huashu-design/SKILL.md +64 -0
- package/skills/huashu-design/stub.yaml +5 -0
- package/skills/hyperframes/SKILL.md +60 -0
- package/skills/hyperframes/stub.yaml +5 -0
- package/skills/impeccable/SKILL.md +75 -0
- package/skills/impeccable/stub.yaml +8 -0
- package/skills/ink-google/SKILL.md +58 -0
- package/skills/ink-google/stub.yaml +5 -0
- package/skills/interface-design-dammyjay/SKILL.md +55 -0
- package/skills/interface-design-dammyjay/stub.yaml +5 -0
- package/skills/liquid-glass-skill/SKILL.md +54 -0
- package/skills/liquid-glass-skill/stub.yaml +5 -0
- package/skills/logo-designer-skill/SKILL.md +56 -0
- package/skills/logo-designer-skill/stub.yaml +5 -0
- package/skills/make-interfaces-better/SKILL.md +60 -0
- package/skills/make-interfaces-better/stub.yaml +5 -0
- package/skills/markdown-viewer-skills/SKILL.md +70 -0
- package/skills/markdown-viewer-skills/stub.yaml +6 -0
- package/skills/marp-slide-quality/SKILL.md +63 -0
- package/skills/marp-slide-quality/stub.yaml +5 -0
- package/skills/marp-slides/SKILL.md +63 -0
- package/skills/marp-slides/stub.yaml +5 -0
- package/skills/mastepanoski-skills/SKILL.md +52 -0
- package/skills/mastepanoski-skills/stub.yaml +5 -0
- package/skills/microsoft-skills/SKILL.md +51 -0
- package/skills/microsoft-skills/stub.yaml +6 -0
- package/skills/mobile-app-design/SKILL.md +67 -0
- package/skills/mobile-app-design/stub.yaml +5 -0
- package/skills/mobile-app-ui-design/SKILL.md +65 -0
- package/skills/mobile-app-ui-design/stub.yaml +5 -0
- package/skills/motion-catalogue/SKILL.md +69 -0
- package/skills/motion-catalogue/stub.yaml +3 -0
- package/skills/motion-design-skill/SKILL.md +55 -0
- package/skills/motion-design-skill/stub.yaml +5 -0
- package/skills/nanobanan-ppt/SKILL.md +64 -0
- package/skills/nanobanan-ppt/stub.yaml +5 -0
- package/skills/neo-user-journey/SKILL.md +62 -0
- package/skills/neo-user-journey/stub.yaml +5 -0
- package/skills/nimbalyst-skills/SKILL.md +59 -0
- package/skills/nimbalyst-skills/stub.yaml +7 -0
- package/skills/open-design/SKILL.md +55 -0
- package/skills/open-design/stub.yaml +4 -0
- package/skills/openai-skills/SKILL.md +67 -0
- package/skills/openai-skills/stub.yaml +6 -0
- package/skills/p5js-hermes/SKILL.md +62 -0
- package/skills/p5js-hermes/stub.yaml +5 -0
- package/skills/phuryn-pm-skills/SKILL.md +56 -0
- package/skills/phuryn-pm-skills/stub.yaml +6 -0
- package/skills/plan-design-review/SKILL.md +58 -0
- package/skills/plan-design-review/stub.yaml +5 -0
- package/skills/platform-design-skills/SKILL.md +52 -0
- package/skills/platform-design-skills/stub.yaml +6 -0
- package/skills/pm-skills/SKILL.md +55 -0
- package/skills/pm-skills/stub.yaml +5 -0
- package/skills/react-doctor/SKILL.md +55 -0
- package/skills/react-doctor/stub.yaml +5 -0
- package/skills/remotion/SKILL.md +59 -0
- package/skills/remotion/stub.yaml +5 -0
- package/skills/revealjs-skill/SKILL.md +54 -0
- package/skills/revealjs-skill/stub.yaml +5 -0
- package/skills/shadcn-ui/SKILL.md +54 -0
- package/skills/shadcn-ui/stub.yaml +5 -0
- package/skills/shader-dev/SKILL.md +60 -0
- package/skills/shader-dev/stub.yaml +5 -0
- package/skills/simota-agent-skills/SKILL.md +53 -0
- package/skills/simota-agent-skills/stub.yaml +5 -0
- package/skills/sleek-design-mobile-apps/SKILL.md +56 -0
- package/skills/sleek-design-mobile-apps/stub.yaml +4 -0
- package/skills/slidev-skill/SKILL.md +54 -0
- package/skills/slidev-skill/stub.yaml +5 -0
- package/skills/softaworks-agent-toolkit/SKILL.md +58 -0
- package/skills/softaworks-agent-toolkit/stub.yaml +6 -0
- package/skills/software-mansion-skills/SKILL.md +63 -0
- package/skills/software-mansion-skills/stub.yaml +11 -0
- package/skills/superdesign-skill/SKILL.md +53 -0
- package/skills/superdesign-skill/stub.yaml +4 -0
- package/skills/swiftui-claude-skills/SKILL.md +54 -0
- package/skills/swiftui-claude-skills/stub.yaml +5 -0
- package/skills/swiftui-patterns/SKILL.md +54 -0
- package/skills/swiftui-patterns/stub.yaml +5 -0
- package/skills/taste-design-stitch/SKILL.md +58 -0
- package/skills/taste-design-stitch/stub.yaml +5 -0
- package/skills/taste-skill/SKILL.md +74 -0
- package/skills/taste-skill/stub.yaml +5 -0
- package/skills/threejs-claude-skill-package/SKILL.md +54 -0
- package/skills/threejs-claude-skill-package/stub.yaml +5 -0
- package/skills/threejs-ecs-ts/SKILL.md +54 -0
- package/skills/threejs-ecs-ts/stub.yaml +5 -0
- package/skills/tui-design-skill/SKILL.md +56 -0
- package/skills/tui-design-skill/stub.yaml +5 -0
- package/skills/ui-craft/SKILL.md +58 -0
- package/skills/ui-craft/stub.yaml +5 -0
- package/skills/ui-ux-pro-max/SKILL.md +64 -0
- package/skills/ui-ux-pro-max/stub.yaml +7 -0
- package/skills/ux-designer-skill/SKILL.md +62 -0
- package/skills/ux-designer-skill/stub.yaml +5 -0
- package/skills/ux-ui-mastery/SKILL.md +53 -0
- package/skills/ux-ui-mastery/stub.yaml +5 -0
- package/skills/vercel-skills/SKILL.md +65 -0
- package/skills/vercel-skills/stub.yaml +6 -0
- package/skills/wcag-ai-skill/SKILL.md +52 -0
- package/skills/wcag-ai-skill/stub.yaml +5 -0
- package/skills/wcag-audit-patterns/SKILL.md +53 -0
- package/skills/wcag-audit-patterns/stub.yaml +5 -0
- package/skills/webgpu-claude-skill/SKILL.md +54 -0
- package/skills/webgpu-claude-skill/stub.yaml +5 -0
- package/skills/wiggle-claude-skill/SKILL.md +63 -0
- package/skills/wiggle-claude-skill/stub.yaml +5 -0
- package/skills/wireframe-skill/SKILL.md +63 -0
- package/skills/wireframe-skill/stub.yaml +5 -0
- package/skills/wireframer/SKILL.md +59 -0
- package/skills/wireframer/stub.yaml +5 -0
- package/skills/wondelai-skills/SKILL.md +57 -0
- package/skills/wondelai-skills/stub.yaml +11 -0
- package/skills/work-with-design-systems/SKILL.md +67 -0
- package/skills/work-with-design-systems/stub.yaml +5 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: excalidraw-diagram
|
|
3
|
+
description: |
|
|
4
|
+
Generate beautiful Excalidraw diagrams from natural language. Diagrams that
|
|
5
|
+
"argue visually" — built-in Playwright visual validation loop, brand-customizable
|
|
6
|
+
palette, and 3.2k+ GitHub stars. By coleam00.
|
|
7
|
+
triggers:
|
|
8
|
+
- "excalidraw diagram"
|
|
9
|
+
- "excalidraw"
|
|
10
|
+
- "hand-drawn diagram"
|
|
11
|
+
- "diagram from description"
|
|
12
|
+
- "visual diagram"
|
|
13
|
+
das:
|
|
14
|
+
category: diagrams
|
|
15
|
+
upstream: "https://github.com/coleam00/excalidraw-diagram-skill"
|
|
16
|
+
upstream_path: "SKILL.md"
|
|
17
|
+
version: latest
|
|
18
|
+
install: true
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# excalidraw-diagram
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full skill: [coleam00/excalidraw-diagram-skill](https://github.com/coleam00/excalidraw-diagram-skill)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the full skill already installed?**
|
|
28
|
+
Check whether the skill at this location still has a `das:` block:
|
|
29
|
+
- Global: `grep -q "^das:" ~/.agents/skills/excalidraw-diagram/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
30
|
+
- Project: `grep -q "^das:" .agents/skills/excalidraw-diagram/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
31
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
32
|
+
- `das:` block present → go to step 2
|
|
33
|
+
|
|
34
|
+
2. **Detect scope, then install:**
|
|
35
|
+
|
|
36
|
+
To detect scope:
|
|
37
|
+
```bash
|
|
38
|
+
[ -e ~/.agents/skills/excalidraw-diagram ] && echo "global" || echo "project"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Global** (installed with `-g`):
|
|
42
|
+
```bash
|
|
43
|
+
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -g -y
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Project** (installed without `-g`):
|
|
47
|
+
```bash
|
|
48
|
+
npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -y
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Invoke after install
|
|
52
|
+
|
|
53
|
+
- Skill name: `excalidraw-diagram`
|
|
54
|
+
- Trigger phrases: "excalidraw diagram", "excalidraw", "diagram from description"
|
|
55
|
+
|
|
56
|
+
## What it does
|
|
57
|
+
|
|
58
|
+
Generates Excalidraw diagrams from natural language descriptions using a built-in Playwright visual validation loop that iterates until the output looks right. Diagrams are designed to "argue visually" — they communicate reasoning, not just structure. Supports brand-customizable palettes and exports to editable `.excalidraw` files. One of the most starred diagram skills in the ecosystem (3.2k+ stars).
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: expo-skills
|
|
3
|
+
description: |
|
|
4
|
+
Official Expo skills for working with Expo projects and Expo Application
|
|
5
|
+
Services (EAS). Fine-tuned for Opus models by the Expo team. Covers the
|
|
6
|
+
Expo SDK, EAS Build, EAS Submit, and Expo Router.
|
|
7
|
+
triggers:
|
|
8
|
+
- "Expo"
|
|
9
|
+
- "EAS"
|
|
10
|
+
- "expo-skills"
|
|
11
|
+
- "Expo Router"
|
|
12
|
+
- "Expo SDK"
|
|
13
|
+
- "EAS Build"
|
|
14
|
+
- "EAS Submit"
|
|
15
|
+
das:
|
|
16
|
+
type: package
|
|
17
|
+
category: official-suites
|
|
18
|
+
upstream: "https://github.com/expo/skills"
|
|
19
|
+
version: latest
|
|
20
|
+
install: false
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
# expo-skills
|
|
24
|
+
|
|
25
|
+
> Catalogue stub — full package: [expo/skills](https://github.com/expo/skills)
|
|
26
|
+
|
|
27
|
+
## Decision tree
|
|
28
|
+
|
|
29
|
+
1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for Expo skill directories.
|
|
30
|
+
- Yes → invoke and proceed
|
|
31
|
+
- No → go to step 2
|
|
32
|
+
|
|
33
|
+
2. **Shell access?** Yes → install below. No → show user the command.
|
|
34
|
+
|
|
35
|
+
## Install command
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npx skills add expo/skills
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
> Fine-tuned for Opus models. See the [GitHub README](https://github.com/expo/skills) for the full list of included skills.
|
|
42
|
+
|
|
43
|
+
## Invoke after install
|
|
44
|
+
|
|
45
|
+
- Skill names: check `ls ~/.design-agent-skills/skills/` for installed skill names after install
|
|
46
|
+
- Triggers: "Expo", "EAS", "expo-skills", "Expo Router", "Expo SDK", "EAS Build", "EAS Submit"
|
|
47
|
+
|
|
48
|
+
## What it does
|
|
49
|
+
|
|
50
|
+
The official Expo skill suite authored by the Expo team, fine-tuned for Opus models. Covers working within the Expo managed and bare workflows, the full Expo SDK API surface, Expo Router (file-based navigation), EAS Build (cloud build service for iOS and Android), and EAS Submit (automated app store submission). The authoritative source for Expo-specific patterns and APIs.
|
|
51
|
+
|
|
52
|
+
## When NOT to use
|
|
53
|
+
|
|
54
|
+
- Bare React Native without Expo — use `callstack-agent-skills` or `software-mansion-skills`
|
|
55
|
+
- Animation and gesture-heavy work in an Expo project — combine with `software-mansion-skills`
|
|
56
|
+
- Mobile UI design work — use `mobile-app-design` or `mobile-app-ui-design`
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
type: package
|
|
2
|
+
tier: official
|
|
3
|
+
upstream: https://github.com/expo/skills
|
|
4
|
+
version: latest
|
|
5
|
+
install_default: "npx skills add expo/skills"
|
|
6
|
+
installed_as:
|
|
7
|
+
- add-app-clip
|
|
8
|
+
- building-native-ui
|
|
9
|
+
- eas-update-insights
|
|
10
|
+
- expo-api-routes
|
|
11
|
+
- expo-brownfield
|
|
12
|
+
- expo-cicd-workflows
|
|
13
|
+
- expo-deployment
|
|
14
|
+
- expo-dev-client
|
|
15
|
+
- expo-module
|
|
16
|
+
- expo-tailwind-setup
|
|
17
|
+
- expo-ui-jetpack-compose
|
|
18
|
+
- expo-ui-swift-ui
|
|
19
|
+
- native-data-fetching
|
|
20
|
+
- upgrading-expo
|
|
21
|
+
- use-dom
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: extract-design-md
|
|
3
|
+
description: |
|
|
4
|
+
Extract Google Stitch design specifications into DESIGN.md format. Creates a
|
|
5
|
+
structured design document from Stitch output that can be version-controlled,
|
|
6
|
+
shared with the team, and used to guide future iterations.
|
|
7
|
+
triggers:
|
|
8
|
+
- "extract design md"
|
|
9
|
+
- "stitch to DESIGN.md"
|
|
10
|
+
- "extract stitch design"
|
|
11
|
+
- "design spec from stitch"
|
|
12
|
+
- "DESIGN.md"
|
|
13
|
+
das:
|
|
14
|
+
category: figma-code
|
|
15
|
+
upstream: "https://github.com/google-labs-code/stitch-skills"
|
|
16
|
+
upstream_path: "plugins/stitch-design/skills/extract-design-md/SKILL.md"
|
|
17
|
+
version: latest
|
|
18
|
+
install: true
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# extract-design-md
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full skill: [google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-design-md/SKILL.md)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the full skill already installed?**
|
|
28
|
+
Check whether the skill at this location still has a `das:` block:
|
|
29
|
+
- Global: `grep -q "^das:" ~/.agents/skills/extract-design-md/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
30
|
+
- Project: `grep -q "^das:" .agents/skills/extract-design-md/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"`
|
|
31
|
+
- No `das:` block → full skill installed, invoke it and proceed
|
|
32
|
+
- `das:` block present → go to step 2
|
|
33
|
+
|
|
34
|
+
2. **Detect scope, then install:**
|
|
35
|
+
|
|
36
|
+
To detect scope:
|
|
37
|
+
```bash
|
|
38
|
+
[ -e ~/.agents/skills/extract-design-md ] && echo "global" || echo "project"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Global** (installed with `-g`):
|
|
42
|
+
```bash
|
|
43
|
+
npx skills add google-labs-code/stitch-skills --skill extract-design-md -g -y
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**Project** (installed without `-g`):
|
|
47
|
+
```bash
|
|
48
|
+
npx skills add google-labs-code/stitch-skills --skill extract-design-md -y
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Invoke after install
|
|
52
|
+
|
|
53
|
+
- Skill name: `extract-design-md`
|
|
54
|
+
- Trigger phrases: "extract design md", "stitch to DESIGN.md", "DESIGN.md"
|
|
55
|
+
|
|
56
|
+
## What it does
|
|
57
|
+
|
|
58
|
+
Extracts design specifications from Google Stitch output into a structured `DESIGN.md` file — the Google Stitch-compatible format for encoding visual design decisions. The resulting file can be version-controlled, shared across agents, and used to maintain design consistency across iterations. Part of Google Labs' official Stitch skills.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: extract-design-system
|
|
3
|
+
description: |
|
|
4
|
+
Reverse-engineers design tokens (colors, typography, spacing, border radius,
|
|
5
|
+
shadows) from any public website and generates tokens.json and tokens.css for
|
|
6
|
+
local projects. Available as agent skill and standalone CLI. Different from
|
|
7
|
+
extract-design-md (which is Stitch/DESIGN.md focused).
|
|
8
|
+
triggers:
|
|
9
|
+
- "extract design system"
|
|
10
|
+
- "reverse-engineer tokens"
|
|
11
|
+
- "extract tokens from website"
|
|
12
|
+
- "arvindrk extract"
|
|
13
|
+
- "website to tokens"
|
|
14
|
+
das:
|
|
15
|
+
type: package
|
|
16
|
+
category: figma-code
|
|
17
|
+
upstream: "https://github.com/arvindrk/extract-design-system"
|
|
18
|
+
version: latest
|
|
19
|
+
install: false
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# extract-design-system
|
|
23
|
+
|
|
24
|
+
> Catalogue stub — full package: [arvindrk/extract-design-system](https://github.com/arvindrk/extract-design-system)
|
|
25
|
+
|
|
26
|
+
## Decision tree
|
|
27
|
+
|
|
28
|
+
1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `extract-design-system` or related directories.
|
|
29
|
+
- Yes → invoke and proceed
|
|
30
|
+
- No → go to step 2
|
|
31
|
+
|
|
32
|
+
2. **Shell access?** Yes → install below. No → show user the command.
|
|
33
|
+
|
|
34
|
+
## Install command
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx skills add arvindrk/extract-design-system
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Invoke after install
|
|
41
|
+
|
|
42
|
+
- Skill name: `extract-design-system`
|
|
43
|
+
- Triggers: "extract design system", "reverse-engineer tokens", "extract tokens from website"
|
|
44
|
+
|
|
45
|
+
## What it does
|
|
46
|
+
|
|
47
|
+
Reverse-engineers a design system from any publicly accessible website. Scrapes and analyzes CSS to extract color palettes, typography scales, spacing systems, border radii, and box shadows, then outputs a `tokens.json` (W3C-compatible) and `tokens.css` (CSS custom properties) ready for local use. Also available as a standalone CLI tool for scripted extraction pipelines.
|
|
48
|
+
|
|
49
|
+
## When NOT to use
|
|
50
|
+
|
|
51
|
+
- Figma-source token extraction — use the Figma MCP (`figma-official-skills`) or `figma-variables-tokens-generator`
|
|
52
|
+
- Stitch/DESIGN.md output format — use `extract-design-md` (taste-design-stitch)
|
|
53
|
+
- Building a token architecture from scratch — use `design-tokens-skill`
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: fal-ai-skills
|
|
3
|
+
description: |
|
|
4
|
+
2 official fal.ai skills: image/video generation using fal.ai AI models,
|
|
5
|
+
and 3D model generation from text or images. Requires a fal.ai API key.
|
|
6
|
+
triggers:
|
|
7
|
+
- "fal.ai"
|
|
8
|
+
- "fal generate"
|
|
9
|
+
- "fal 3D"
|
|
10
|
+
- "generate image fal"
|
|
11
|
+
- "generate video fal"
|
|
12
|
+
- "3D model from image"
|
|
13
|
+
das:
|
|
14
|
+
category: creative-3d
|
|
15
|
+
upstream: "https://github.com/fal-ai-community/skills"
|
|
16
|
+
version: latest
|
|
17
|
+
install: false
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
# fal-ai-skills
|
|
21
|
+
|
|
22
|
+
> Catalogue stub — full package: [fal-ai-community/skills](https://github.com/fal-ai-community/skills)
|
|
23
|
+
|
|
24
|
+
## Decision tree
|
|
25
|
+
|
|
26
|
+
Run this before using fal.ai generation features:
|
|
27
|
+
|
|
28
|
+
1. **Is a fal.ai skill already installed?**
|
|
29
|
+
Check: `~/.design-agent-skills/skills/fal-generate/SKILL.md` exists.
|
|
30
|
+
- Yes → invoke the specific skill by name and proceed
|
|
31
|
+
- No → go to step 2
|
|
32
|
+
|
|
33
|
+
2. **Do you have shell access?**
|
|
34
|
+
- Yes → run the install command below, then invoke the skill
|
|
35
|
+
- No → show the user the install command, ask them to run it, then proceed once confirmed
|
|
36
|
+
|
|
37
|
+
## Install command
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
# Generate images and videos using fal.ai models
|
|
41
|
+
npx skills add fal-ai-community/fal-generate
|
|
42
|
+
|
|
43
|
+
# Generate 3D models from text or images
|
|
44
|
+
npx skills add fal-ai-community/fal-3d
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Requires: `FAL_KEY` environment variable set to your fal.ai API key.
|
|
48
|
+
|
|
49
|
+
## Invoke after install
|
|
50
|
+
|
|
51
|
+
- `fal-generate` — "generate image", "generate video", "fal generate"
|
|
52
|
+
- `fal-3d` — "generate 3D model", "3D from image", "fal 3D"
|
|
53
|
+
|
|
54
|
+
## What it does
|
|
55
|
+
|
|
56
|
+
Official fal.ai community skills for AI media generation. `fal-generate` creates images and videos using fal.ai's model zoo (FLUX, Stable Diffusion, video models). `fal-3d` generates 3D models from text descriptions or reference images. Both require a fal.ai API key.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: figma-catalogue
|
|
3
|
+
description: |
|
|
4
|
+
Domain navigator for Figma, design-to-code, design tokens, and official
|
|
5
|
+
platform skill suites. Routes to the right skill for working between
|
|
6
|
+
design tools and code, managing design systems, or using official
|
|
7
|
+
platform skills (Anthropic, Vercel, Expo, Software Mansion, Callstack).
|
|
8
|
+
triggers:
|
|
9
|
+
- "Figma skills"
|
|
10
|
+
- "design to code skills"
|
|
11
|
+
- "design system skills"
|
|
12
|
+
- "design tokens skills"
|
|
13
|
+
- "Stitch skills"
|
|
14
|
+
- "official platform skills"
|
|
15
|
+
- "platform suite skills"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# figma-catalogue
|
|
19
|
+
|
|
20
|
+
Domain navigator for Figma, design-to-code workflows, design tokens, and official platform suites.
|
|
21
|
+
Activate when the user asks for a skill that bridges design tools and code.
|
|
22
|
+
|
|
23
|
+
→ For the full catalogue across all domains: use `design-catalogue`.
|
|
24
|
+
|
|
25
|
+
## When to use
|
|
26
|
+
|
|
27
|
+
Activate when the user:
|
|
28
|
+
- Asks about Figma-to-code or code-to-Figma workflows
|
|
29
|
+
- Needs design token management or extraction
|
|
30
|
+
- Wants to work with design systems
|
|
31
|
+
- Asks about official skill suites (Anthropic, Vercel, Expo, Figma)
|
|
32
|
+
|
|
33
|
+
## Figma & Design-to-Code
|
|
34
|
+
|
|
35
|
+
| Skill | Best for |
|
|
36
|
+
|-------|----------|
|
|
37
|
+
| [`figma-official-skills`](../figma-official-skills/SKILL.md) | 7 official Figma skills: implement, generate, library, code-connect |
|
|
38
|
+
| [`openai-skills`](../openai-skills/SKILL.md) | OpenAI's 9 skills: Figma + frontend + slides + imagegen |
|
|
39
|
+
| [`google-stitch-skills`](../google-stitch-skills/SKILL.md) | 6 Stitch skills: design-md, react-components, shadcn, loop |
|
|
40
|
+
| [`extract-design-md`](../extract-design-md/SKILL.md) | Extract Stitch output into DESIGN.md format |
|
|
41
|
+
| [`claude2figma`](../claude2figma/SKILL.md) | 4 skills enforcing token compliance: colors/fonts/spacing → Figma variables |
|
|
42
|
+
| [`work-with-design-systems`](../work-with-design-systems/SKILL.md) | Inspect (WCAG audit) + Build (6-phase with variable bindings) dual-mode |
|
|
43
|
+
| [`figma-variables-tokens-generator`](../figma-variables-tokens-generator/SKILL.md) | Questionnaire → W3C token ZIP + Figma plugin for import |
|
|
44
|
+
| [`figma-skill`](../figma-skill/SKILL.md) | Figma API + Community resources → design tokens → 7 frameworks |
|
|
45
|
+
| [`extract-design-system`](../extract-design-system/SKILL.md) | Reverse-engineers tokens from any live website → tokens.json + tokens.css |
|
|
46
|
+
| [`design-tokens-skill`](../design-tokens-skill/SKILL.md) | W3C DTCG token spec: OKLCH, references/aliasing, Terrazzo, Figma exports |
|
|
47
|
+
|
|
48
|
+
## Official Platform Suites
|
|
49
|
+
|
|
50
|
+
| Skill | Best for |
|
|
51
|
+
|-------|----------|
|
|
52
|
+
| [`anthropics-skills`](../anthropics-skills/SKILL.md) | 6 Anthropic skills: frontend-design, artifacts, canvas, theme, brand, pptx |
|
|
53
|
+
| [`vercel-skills`](../vercel-skills/SKILL.md) | 4 Vercel skills: web-design-guidelines, components, React best practices |
|
|
54
|
+
| [`microsoft-skills`](../microsoft-skills/SKILL.md) | 2 Microsoft skills: design review, dark-theme React |
|
|
55
|
+
| [`software-mansion-skills`](../software-mansion-skills/SKILL.md) | Official Software Mansion: RN animations, gestures, SVG, on-device AI |
|
|
56
|
+
| [`callstack-agent-skills`](../callstack-agent-skills/SKILL.md) | Official Callstack: RN best practices, profiling, Turbo Modules, upgrade |
|
|
57
|
+
| [`expo-skills`](../expo-skills/SKILL.md) | Official Expo: Expo SDK, EAS Build/Submit, Expo Router |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: figma-official-skills
|
|
3
|
+
description: |
|
|
4
|
+
7 official Figma skills for design-to-code and code-to-design workflows.
|
|
5
|
+
Covers Figma Plugin API scripting, design implementation, library generation,
|
|
6
|
+
Code Connect component mapping, and design system rules creation.
|
|
7
|
+
triggers:
|
|
8
|
+
- "Figma skill"
|
|
9
|
+
- "figma-implement-design"
|
|
10
|
+
- "figma-generate-design"
|
|
11
|
+
- "Figma to code"
|
|
12
|
+
- "code to Figma"
|
|
13
|
+
- "figma-use"
|
|
14
|
+
- "Figma Plugin API"
|
|
15
|
+
das:
|
|
16
|
+
category: figma-code
|
|
17
|
+
upstream: "https://github.com/figma/skills"
|
|
18
|
+
version: latest
|
|
19
|
+
install: false
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# figma-official-skills
|
|
23
|
+
|
|
24
|
+
> Catalogue stub — full package: [figma/skills](https://github.com/figma/skills)
|
|
25
|
+
|
|
26
|
+
## Decision tree
|
|
27
|
+
|
|
28
|
+
Run this before any Figma ↔ code workflow:
|
|
29
|
+
|
|
30
|
+
1. **Is a Figma skill already installed?**
|
|
31
|
+
Check: `~/.design-agent-skills/skills/figma-use/SKILL.md` exists (representative skill).
|
|
32
|
+
- Yes → invoke the specific Figma skill by name and proceed
|
|
33
|
+
- No → go to step 2
|
|
34
|
+
|
|
35
|
+
2. **Do you have shell access?**
|
|
36
|
+
- Yes → install the specific skill below, then invoke it
|
|
37
|
+
- No → show the user the install command, ask them to run it, then proceed once confirmed
|
|
38
|
+
|
|
39
|
+
## Install command
|
|
40
|
+
|
|
41
|
+
Install individual skills (recommended — install only what you need):
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
# Figma Plugin API scripting
|
|
45
|
+
npx skills add figma/figma-use
|
|
46
|
+
|
|
47
|
+
# Figma to production code with 1:1 fidelity
|
|
48
|
+
npx skills add figma/figma-implement-design
|
|
49
|
+
|
|
50
|
+
# Build/update Figma screens from code or description
|
|
51
|
+
npx skills add figma/figma-generate-design
|
|
52
|
+
|
|
53
|
+
# Build design system library in Figma from codebase
|
|
54
|
+
npx skills add figma/figma-generate-library
|
|
55
|
+
|
|
56
|
+
# Connect Figma components to code
|
|
57
|
+
npx skills add figma/figma-code-connect-components
|
|
58
|
+
|
|
59
|
+
# Generate project-specific design system rules
|
|
60
|
+
npx skills add figma/figma-create-design-system-rules
|
|
61
|
+
|
|
62
|
+
# Create a blank Figma/FigJam file
|
|
63
|
+
npx skills add figma/figma-create-new-file
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Invoke after install
|
|
67
|
+
|
|
68
|
+
| Skill | Invoke with |
|
|
69
|
+
|-------|-------------|
|
|
70
|
+
| `figma-use` | "run Figma Plugin API", "Figma script" |
|
|
71
|
+
| `figma-implement-design` | "implement this Figma design", "Figma to code" |
|
|
72
|
+
| `figma-generate-design` | "generate Figma design", "code to Figma" |
|
|
73
|
+
| `figma-generate-library` | "build Figma library", "design system in Figma" |
|
|
74
|
+
| `figma-code-connect-components` | "code connect", "link Figma to code" |
|
|
75
|
+
| `figma-create-design-system-rules` | "Figma design system rules" |
|
|
76
|
+
| `figma-create-new-file` | "create Figma file", "new FigJam" |
|
|
77
|
+
|
|
78
|
+
## What it does
|
|
79
|
+
|
|
80
|
+
Official Figma skill suite covering the complete design ↔ code bridge. Converts Figma designs to production code with 1:1 fidelity, generates or updates Figma screens from code changes, builds design system libraries, connects Figma components to code components via Code Connect, and scripts the Figma Plugin API for custom automation.
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: figma-skill
|
|
3
|
+
description: |
|
|
4
|
+
Connects to Figma API, discovers Community resources matching the project,
|
|
5
|
+
extracts design tokens, and generates framework-specific code for 7
|
|
6
|
+
frameworks.
|
|
7
|
+
triggers:
|
|
8
|
+
- "figma-skill"
|
|
9
|
+
- "Figma API extract"
|
|
10
|
+
- "Figma to framework"
|
|
11
|
+
- "nafiurrahmanniloy figma"
|
|
12
|
+
- "Figma Community resources"
|
|
13
|
+
das:
|
|
14
|
+
type: package
|
|
15
|
+
category: figma-code
|
|
16
|
+
upstream: "https://github.com/nafiurrahmanniloy/figma-skill"
|
|
17
|
+
version: latest
|
|
18
|
+
install: false
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# figma-skill
|
|
22
|
+
|
|
23
|
+
> Catalogue stub — full package: [nafiurrahmanniloy/figma-skill](https://github.com/nafiurrahmanniloy/figma-skill)
|
|
24
|
+
|
|
25
|
+
## Decision tree
|
|
26
|
+
|
|
27
|
+
1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `figma-skill` or related directories.
|
|
28
|
+
- Yes → invoke and proceed
|
|
29
|
+
- No → go to step 2
|
|
30
|
+
|
|
31
|
+
2. **Shell access?** Yes → install below. No → show user the command.
|
|
32
|
+
|
|
33
|
+
## Install command
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npx skills add nafiurrahmanniloy/figma-skill
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Invoke after install
|
|
40
|
+
|
|
41
|
+
- Skill name: `figma-skill`
|
|
42
|
+
- Triggers: "figma-skill", "Figma API extract", "Figma to framework", "Figma Community resources"
|
|
43
|
+
|
|
44
|
+
## What it does
|
|
45
|
+
|
|
46
|
+
Connects to the Figma API to discover Community file resources that match your project context, extracts design tokens from those files, and generates framework-specific implementation code. Supports 7 frameworks — covering major React, Vue, Angular, and native ecosystems.
|
|
47
|
+
|
|
48
|
+
## When NOT to use
|
|
49
|
+
|
|
50
|
+
- Official Figma file operations (reading/writing your files) — use the Figma MCP (`figma-official-skills`)
|
|
51
|
+
- Design system token enforcement in Figma — use `claude2figma`
|
|
52
|
+
- Token architecture without Figma — use `design-tokens-skill`
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: figma-variables-tokens-generator
|
|
3
|
+
description: |
|
|
4
|
+
Guides creation of a W3C-compliant token system via questionnaire, generates
|
|
5
|
+
a structured ZIP of JSON token files organized by collection tier (Primitives,
|
|
6
|
+
Semantic, Component), plus a Figma plugin that imports them maintaining
|
|
7
|
+
dependency order.
|
|
8
|
+
triggers:
|
|
9
|
+
- "Figma variables"
|
|
10
|
+
- "token generator"
|
|
11
|
+
- "figma-variables-tokens"
|
|
12
|
+
- "W3C token ZIP"
|
|
13
|
+
- "Shanmus4"
|
|
14
|
+
- "token collection tiers"
|
|
15
|
+
das:
|
|
16
|
+
type: package
|
|
17
|
+
category: figma-code
|
|
18
|
+
upstream: "https://github.com/Shanmus4/figma-variables-tokens-generator"
|
|
19
|
+
version: latest
|
|
20
|
+
install: false
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
# figma-variables-tokens-generator
|
|
24
|
+
|
|
25
|
+
> Catalogue stub — full package: [Shanmus4/figma-variables-tokens-generator](https://github.com/Shanmus4/figma-variables-tokens-generator)
|
|
26
|
+
|
|
27
|
+
## Decision tree
|
|
28
|
+
|
|
29
|
+
1. **Is the skill already installed?** Check `~/.design-agent-skills/skills/` for `figma-variables-tokens-generator` or related directories.
|
|
30
|
+
- Yes → invoke and proceed
|
|
31
|
+
- No → go to step 2
|
|
32
|
+
|
|
33
|
+
2. **Shell access?** Yes → install below. No → show user the command.
|
|
34
|
+
|
|
35
|
+
## Install command
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npx skills add Shanmus4/figma-variables-tokens-generator
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Invoke after install
|
|
42
|
+
|
|
43
|
+
- Skill name: `figma-variables-tokens-generator`
|
|
44
|
+
- Triggers: "Figma variables", "token generator", "W3C token ZIP", "Shanmus4"
|
|
45
|
+
|
|
46
|
+
## What it does
|
|
47
|
+
|
|
48
|
+
Runs a structured questionnaire to understand your design system needs, then generates a W3C Design Token Community Group (DTCG) compliant ZIP archive. The ZIP contains JSON token files organized into collection tiers: Primitives (raw values), Semantic (contextual aliases), and Component (component-specific tokens). Also provides a companion Figma plugin that imports these JSON files into Figma Variables, respecting dependency order across tiers.
|
|
49
|
+
|
|
50
|
+
## When NOT to use
|
|
51
|
+
|
|
52
|
+
- Code-side token management and pipelines — use `design-tokens-skill`
|
|
53
|
+
- Existing design systems not based in Figma
|
|
54
|
+
- Figma design operations unrelated to tokens — use the Figma MCP (`figma-official-skills`)
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: fixing-accessibility
|
|
3
|
+
description: |
|
|
4
|
+
Audits and fixes ARIA labels, keyboard navigation, focus management, color
|
|
5
|
+
contrast, and form error handling. Surfaces issues systematically and applies
|
|
6
|
+
targeted remediations to bring components up to accessibility standards.
|
|
7
|
+
triggers:
|
|
8
|
+
- "fixing accessibility"
|
|
9
|
+
- "ARIA"
|
|
10
|
+
- "keyboard navigation"
|
|
11
|
+
- "focus management"
|
|
12
|
+
das:
|
|
13
|
+
category: accessibility-quality
|
|
14
|
+
upstream: "https://github.com/ibelick/fixing-accessibility"
|
|
15
|
+
upstream_path: "SKILL.md"
|
|
16
|
+
version: latest
|
|
17
|
+
install: true
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
# fixing-accessibility
|
|
21
|
+
|
|
22
|
+
> Catalogue stub — full skill: [ibelick/fixing-accessibility](https://github.com/ibelick/fixing-accessibility)
|
|
23
|
+
|
|
24
|
+
## Decision tree
|
|
25
|
+
|
|
26
|
+
Run this before any accessibility audit or fix:
|
|
27
|
+
|
|
28
|
+
1. **Is the full skill already installed?**
|
|
29
|
+
Check: `~/.design-agent-skills/skills/fixing-accessibility/SKILL.md` exists AND does NOT contain a `das:` block.
|
|
30
|
+
- Yes → invoke `fixing-accessibility` and proceed
|
|
31
|
+
- No → go to step 2
|
|
32
|
+
|
|
33
|
+
2. **Do you have shell access?**
|
|
34
|
+
- Yes → run the install command below, then invoke the skill
|
|
35
|
+
- No → show the user the install command, ask them to run it, then proceed once confirmed
|
|
36
|
+
|
|
37
|
+
## Install command
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npx skills add ibelick/fixing-accessibility
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Or per-agent:
|
|
44
|
+
- Claude Code: `claude skills add ibelick/fixing-accessibility`
|
|
45
|
+
- Cursor/OpenCode: `npx skills add ibelick/fixing-accessibility`
|
|
46
|
+
|
|
47
|
+
## Invoke after install
|
|
48
|
+
|
|
49
|
+
- Skill name: `fixing-accessibility`
|
|
50
|
+
- Trigger phrases: "fixing accessibility", "accessibility audit", "ARIA", "keyboard navigation", "focus management"
|
|
51
|
+
|
|
52
|
+
## What it does
|
|
53
|
+
|
|
54
|
+
Audits components for missing or incorrect ARIA labels, broken keyboard navigation paths, focus management gaps, color contrast failures, and inaccessible form error patterns. Applies concrete code-level fixes so components meet accessibility standards without losing visual design intent.
|