ui-design
✓Use this to design a nice UI in single html as inspiration & UI exploration.
Installation
SKILL.md
Only code in HTML/Tailwind in a single code block. Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response. Don't mention about tokens, Tailwind or HTML.
Always include the html, head and body tags. Use lucide icons for javascript, 1.5 strokewidth. Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names).
Checkboxes, sliders, dropdowns, toggles should be custom (don't add, only include if part of the UI). Be extremely accurate with fonts. For font weight, use one level thinner: for example, Bold should be Semibold.
Use this to design a nice UI in single html as inspiration & UI exploration. Source: shajith003/awesome-claude-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-design- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ui-design?
Use this to design a nice UI in single html as inspiration & UI exploration. Source: shajith003/awesome-claude-skills.
How do I install ui-design?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-design 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/shajith003/awesome-claude-skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01