Individual skill
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
skills/design/ui-styling/SKILL.md
Source commit 1c04afc2a760ed58cea1308851e7626f76c4ff44
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Local scripts
- Last checked
- Nov 6, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 27
- Repository last updated
- Oct 24, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- claude-code Repository topic
- agent-skills Repository topic
- agentic-workflow Repository topic
- skill-md Repository topic
- ai-agent Repository topic
- ai-workflows Repository topic
- codex Repository topic
- coding-agent Repository topic
- developer-tools Repository topic
- gemini-cli Repository topic
- design Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
LICENSE.txtdoc · 11,357 bytesSKILL.mdcore · 10,532 bytesSKILL.mdcore · 10,532 bytesSKILL.mdcore · 10,532 bytesSKILL.mdcore · 10,532 bytesSKILL.mdcore · 10,532 bytesSKILL.mdcore · 10,532 bytescanvas-fonts/ArsenalSC-OFL.txtdoc · 4,373 bytescanvas-fonts/ArsenalSC-Regular.ttfasset · 165,848 bytescanvas-fonts/BigShoulders-Bold.ttfasset · 94,528 bytescanvas-fonts/BigShoulders-OFL.txtdoc · 4,397 bytescanvas-fonts/BigShoulders-Regular.ttfasset · 94,396 bytescanvas-fonts/Boldonse-OFL.txtdoc · 4,390 bytescanvas-fonts/Boldonse-Regular.ttfasset · 77,168 bytescanvas-fonts/BricolageGrotesque-Bold.ttfasset · 90,952 bytescanvas-fonts/BricolageGrotesque-OFL.txtdoc · 4,403 bytescanvas-fonts/BricolageGrotesque-Regular.ttfasset · 90,920 bytescanvas-fonts/CrimsonPro-Bold.ttfasset · 107,352 bytescanvas-fonts/CrimsonPro-Italic.ttfasset · 108,828 bytescanvas-fonts/CrimsonPro-OFL.txtdoc · 4,394 bytescanvas-fonts/CrimsonPro-Regular.ttfasset · 106,696 bytescanvas-fonts/DMMono-OFL.txtdoc · 4,392 bytescanvas-fonts/DMMono-Regular.ttfasset · 48,852 bytescanvas-fonts/EricaOne-OFL.txtdoc · 4,410 bytescanvas-fonts/EricaOne-Regular.ttfasset · 24,872 bytescanvas-fonts/GeistMono-Bold.ttfasset · 78,304 bytescanvas-fonts/GeistMono-OFL.txtdoc · 4,388 bytescanvas-fonts/GeistMono-Regular.ttfasset · 78,232 bytescanvas-fonts/Gloock-OFL.txtdoc · 4,381 bytescanvas-fonts/Gloock-Regular.ttfasset · 95,156 bytescanvas-fonts/IBMPlexMono-Bold.ttfasset · 136,008 bytescanvas-fonts/IBMPlexMono-OFL.txtdoc · 4,363 bytescanvas-fonts/IBMPlexMono-Regular.ttfasset · 133,796 bytescanvas-fonts/IBMPlexSerif-Bold.ttfasset · 161,000 bytescanvas-fonts/IBMPlexSerif-BoldItalic.ttfasset · 169,840 bytescanvas-fonts/IBMPlexSerif-Italic.ttfasset · 170,004 bytescanvas-fonts/IBMPlexSerif-Regular.ttfasset · 160,380 bytescanvas-fonts/InstrumentSans-Bold.ttfasset · 68,084 bytescanvas-fonts/InstrumentSans-BoldItalic.ttfasset · 70,004 bytescanvas-fonts/InstrumentSans-Italic.ttfasset · 69,900 bytescanvas-fonts/InstrumentSans-OFL.txtdoc · 4,403 bytescanvas-fonts/InstrumentSans-Regular.ttfasset · 68,028 bytescanvas-fonts/InstrumentSerif-Italic.ttfasset · 70,868 bytescanvas-fonts/InstrumentSerif-Regular.ttfasset · 69,312 bytescanvas-fonts/Italiana-OFL.txtdoc · 4,394 bytescanvas-fonts/Italiana-Regular.ttfasset · 27,184 bytescanvas-fonts/JetBrainsMono-Bold.ttfasset · 114,828 bytescanvas-fonts/JetBrainsMono-OFL.txtdoc · 4,399 bytescanvas-fonts/JetBrainsMono-Regular.ttfasset · 114,904 bytescanvas-fonts/Jura-Light.ttfasset · 154,308 bytescanvas-fonts/Jura-Medium.ttfasset · 154,488 bytescanvas-fonts/Jura-OFL.txtdoc · 4,380 bytescanvas-fonts/LibreBaskerville-OFL.txtdoc · 4,449 bytescanvas-fonts/LibreBaskerville-Regular.ttfasset · 147,584 bytescanvas-fonts/Lora-Bold.ttfasset · 133,828 bytescanvas-fonts/Lora-BoldItalic.ttfasset · 140,332 bytescanvas-fonts/Lora-Italic.ttfasset · 139,328 bytescanvas-fonts/Lora-OFL.txtdoc · 4,423 bytescanvas-fonts/Lora-Regular.ttfasset · 133,888 bytescanvas-fonts/NationalPark-Bold.ttfasset · 79,208 bytescanvas-fonts/NationalPark-OFL.txtdoc · 4,399 bytescanvas-fonts/NationalPark-Regular.ttfasset · 76,424 bytescanvas-fonts/NothingYouCouldDo-OFL.txtdoc · 4,363 bytescanvas-fonts/NothingYouCouldDo-Regular.ttfasset · 32,020 bytescanvas-fonts/Outfit-Bold.ttfasset · 55,392 bytescanvas-fonts/Outfit-OFL.txtdoc · 4,389 bytescanvas-fonts/Outfit-Regular.ttfasset · 54,912 bytescanvas-fonts/PixelifySans-Medium.ttfasset · 51,072 bytescanvas-fonts/PixelifySans-OFL.txtdoc · 4,395 bytescanvas-fonts/PoiretOne-OFL.txtdoc · 4,366 bytescanvas-fonts/PoiretOne-Regular.ttfasset · 45,244 bytescanvas-fonts/RedHatMono-Bold.ttfasset · 34,420 bytescanvas-fonts/RedHatMono-OFL.txtdoc · 4,394 bytescanvas-fonts/RedHatMono-Regular.ttfasset · 34,488 bytescanvas-fonts/Silkscreen-OFL.txtdoc · 4,394 bytescanvas-fonts/Silkscreen-Regular.ttfasset · 31,960 bytescanvas-fonts/SmoochSans-Medium.ttfasset · 59,704 bytescanvas-fonts/SmoochSans-OFL.txtdoc · 4,396 bytescanvas-fonts/Tektur-Medium.ttfasset · 76,248 bytescanvas-fonts/Tektur-OFL.txtdoc · 4,385 bytescanvas-fonts/Tektur-Regular.ttfasset · 75,604 bytescanvas-fonts/WorkSans-Bold.ttfasset · 191,304 bytescanvas-fonts/WorkSans-BoldItalic.ttfasset · 175,772 bytescanvas-fonts/WorkSans-Italic.ttfasset · 174,280 bytescanvas-fonts/WorkSans-OFL.txtdoc · 4,397 bytescanvas-fonts/WorkSans-Regular.ttfasset · 188,916 bytescanvas-fonts/YoungSerif-OFL.txtdoc · 4,398 bytescanvas-fonts/YoungSerif-Regular.ttfasset · 105,136 bytesreferences/canvas-design-system.mddoc · 7,888 bytesreferences/shadcn-accessibility.mddoc · 9,976 bytesreferences/shadcn-components.mddoc · 11,155 bytesreferences/shadcn-theming.mddoc · 8,672 bytesreferences/tailwind-customization.mddoc · 10,171 bytesreferences/tailwind-responsive.mddoc · 8,270 bytesreferences/tailwind-utilities.mddoc · 9,980 bytesscripts/requirements.txtdoc · 444 bytesscripts/shadcn_add.pyruns · 7,991 bytesscripts/tailwind_config_gen.pyruns · 13,625 bytesscripts/tests/coverage-ui.jsonasset · 35,121 bytesscripts/tests/requirements.txtdoc · 52 bytesscripts/tests/test_shadcn_add.pyruns · 9,920 bytesscripts/tests/test_tailwind_config_gen.pyruns · 12,158 bytes
Read excerpt
# UI Styling Skill
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
## Reference
- shadcn/ui: https://ui.shadcn.com/llms.txt
- Tailwind CSS: https://tailwindcss.com/docs
## When to Use This Skill
Use when:
- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
- Implementing accessible components (dialogs, forms, tables, navigation)