frontend-design-system
Frontend Design System Skill
Purpose
This Skill packages opinionated guidance for building and refactoring frontend UI so that output:
- Uses the existing design system instead of ad-hoc styles.
- Avoids generic “AI slop” UI and looks intentional and product-ready.
- Meets accessibility, responsiveness, and basic performance expectations.
Use this Skill whenever the user:
- Asks for React/Tailwind components, HTML/CSS layouts, or UI redesigns.
- Mentions design, UX, responsiveness, accessibility, or “make this look better”.
- Wants to refactor messy or inconsistent frontend code.
Tech stack assumptions
Unless the user clearly states otherwise, assume:
- Framework: React function components (with hooks, TypeScript when present).
- Styling: Tailwind CSS with design tokens (CSS variables, theme config).
More from d-oit/do-novelist-ai
iterative-refinement
Execute iterative refinement workflows with validation loops until quality criteria are met. Use for test-fix cycles, code quality improvement, performance optimization, or any task requiring repeated action-validate-improve cycles.
11web-search-researcher
Research topics using web search and content fetching to find accurate, current information. Use when you need modern information, official documentation, best practices, technical solutions, or comparisons beyond your training data. Provides systematic web research with strategic searches, content analysis, and synthesized findings.
10agent-coordination
Coordinate multiple agents for software development across any language. Use for parallel execution of independent tasks, sequential chains with dependencies, swarm analysis from multiple perspectives, or iterative refinement loops. Handles Python, JavaScript, Java, Go, Rust, C#, and other languages.
9task-decomposition
Break down complex tasks into atomic, actionable goals with clear dependencies and success criteria. Use this skill when you need to plan multi-step projects, coordinate agents, or decompose complex user requests into manageable sub-tasks.
8gemini-websearch
Performs web searches using Gemini CLI headless mode with google_web_search tool. Includes intelligent caching, result validation, and analytics. Use when searching for current information, documentation, or when the user explicitly requests web search.
7skill-creator
Create new Claude Code skills with proper directory structure, SKILL.md file, and YAML frontmatter. Use this skill when you need to create a new reusable knowledge module for Claude Code.
6