frontend-design-system
✓Design and refactor React/Tailwind frontends using the project design system. Use this Skill when working on UI components, pages, layouts, or UX improvements and you want distinctive, accessible, non-generic designs that avoid AI slop.
Installation
SKILL.md
This Skill packages opinionated guidance for building and refactoring frontend UI so that output:
If the project uses a different stack (e.g. Svelte, Vue, plain HTML/CSS), keep the same design principles and adapt syntax.
If the repo has existing tokens/components, inspect them first (using Read/Grep/Glob) and align with those patterns.
Design and refactor React/Tailwind frontends using the project design system. Use this Skill when working on UI components, pages, layouts, or UX improvements and you want distinctive, accessible, non-generic designs that avoid AI slop. Source: d-oit/do-novelist-ai.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/d-oit/do-novelist-ai --skill frontend-design-system- Source
- d-oit/do-novelist-ai
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is frontend-design-system?
Design and refactor React/Tailwind frontends using the project design system. Use this Skill when working on UI components, pages, layouts, or UX improvements and you want distinctive, accessible, non-generic designs that avoid AI slop. Source: d-oit/do-novelist-ai.
How do I install frontend-design-system?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/d-oit/do-novelist-ai --skill frontend-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/d-oit/do-novelist-ai
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01