Agent skill
scan-ui-system
[Documentation] Orchestrate all UI system scans in parallel: design system + SCSS styling + frontend patterns. Single command to populate all UI-related project reference docs. Use for project onboarding, post-scaffold setup, or periodic refresh.
Install this agent skill to your Project
npx add-skill https://github.com/duc01226/EasyPlatform/tree/main/.claude/skills/scan-ui-system
SKILL.md
[IMPORTANT] Use
TaskCreateto break ALL work into small tasks BEFORE starting.
Quick Summary
Goal: Run all 3 UI scan skills in parallel and produce a summary.
Workflow:
- Check Prerequisites — Verify project has frontend code (not backend-only)
- Launch Parallel Scans — 3 skills simultaneously
- Collect Results — Read scan output from reference docs
- Summarize — Report what was found
Key Rules:
- Skip entirely if project has no frontend code
- All 3 scans run in PARALLEL for speed
- Does NOT modify code — only populates docs/project-reference/
When to Use
- After
/scaffoldin greenfield-init workflow (design system just created) - First time using easy-claude on an existing project (project onboarding)
- Periodic refresh when design system has changed significantly
- User runs
/scan-ui-systemmanually - Auto-triggered by
project-configskill Phase 5 (scan task creation)
When to Skip
- Backend-only project (no frontend code directories)
- All 3 reference docs are already populated and recent
Auto-Trigger Integration
Follow existing pattern from project-config/SKILL.md Phase 5 scan table. The project-config skill creates TaskCreate items for all /scan-* skills. This skill replaces 3 separate scan entries with 1 orchestrator:
| Reference Docs | Scan Skill |
|---|---|
design-system/README.md + scss-styling-guide.md + frontend-patterns-reference.md |
/scan-ui-system |
Execution
Launch 3 skills in parallel:
Scan 1: Design System
Activate /scan-design-system → populates docs/project-reference/design-system/README.md
Scan 2: SCSS/Styling
Activate /scan-scss-styling → populates docs/project-reference/scss-styling-guide.md
Scan 3: Frontend Patterns
Activate /scan-frontend-patterns → populates docs/project-reference/frontend-patterns-reference.md
Summary Output
After all 3 scans complete, report:
"UI System Scan Complete:
- Design System: {X} tokens, {Y} components found → docs/project-reference/design-system/README.md (content auto-injected by hook — check for [Injected: ...] header before reading)
- Styling: {approach} detected, {Z} variables/mixins → docs/project-reference/scss-styling-guide.md
- Frontend Patterns: {framework} detected, {N} base classes → docs/project-reference/frontend-patterns-reference.md"
Closing Reminders
- MUST break work into small todo tasks using
TaskCreateBEFORE starting - MUST search codebase for 3+ similar patterns before creating new code
- MUST cite
file:lineevidence for every claim (confidence >80% to act) - MUST add a final review todo task to verify work quality
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
fix-parallel
[Implementation] Analyze & fix issues with parallel fullstack-developer agents
ask
[Utilities] Answer technical and architectural questions.
claude-code
[Utilities] Claude Code CLI setup, configuration, troubleshooting, and feature guidance. Triggers on claude code setup, hook not firing, MCP connection, context limit, skill creation, slash command setup.
workflow-deployment
[Workflow] Trigger Deployment & Infrastructure workflow — CI/CD pipelines, Docker, Kubernetes setup and deployment.
workflow-idea-to-pbi
[Workflow] Trigger Idea to PBI workflow — po/ba workflow: capture idea, refine to pbi, create stories, prioritize.
easy-claude-help
[Utilities] Configuration guide for the easy-claude framework — explain settings, guide users through configuring .ck.json.
Didn't find tool you were looking for?