ui-ux-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.
- Version
- 1.0.0
- License
- MIT
Pinned to revision 45cf0fa3c5e7, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/ui-ux-ui-styling/SKILL.md
- skills/ui-ux-ui-styling/LICENSE.txt
- skills/ui-ux-ui-styling/canvas-fonts/ArsenalSC-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/ArsenalSC-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/BigShoulders-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/BigShoulders-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/BigShoulders-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Boldonse-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Boldonse-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/BricolageGrotesque-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/BricolageGrotesque-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/BricolageGrotesque-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/CrimsonPro-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/CrimsonPro-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/CrimsonPro-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/CrimsonPro-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/DMMono-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/DMMono-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/EricaOne-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/EricaOne-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/GeistMono-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/GeistMono-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/GeistMono-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Gloock-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Gloock-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexMono-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexMono-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexMono-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexSerif-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexSerif-BoldItalic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexSerif-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/IBMPlexSerif-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSans-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSans-BoldItalic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSans-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSans-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSans-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSerif-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/InstrumentSerif-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Italiana-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Italiana-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/JetBrainsMono-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/JetBrainsMono-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/JetBrainsMono-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Jura-Light.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Jura-Medium.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Jura-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/LibreBaskerville-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/LibreBaskerville-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Lora-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Lora-BoldItalic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Lora-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Lora-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Lora-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/NationalPark-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/NationalPark-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/NationalPark-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/NothingYouCouldDo-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/NothingYouCouldDo-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Outfit-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Outfit-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Outfit-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/PixelifySans-Medium.ttf
- skills/ui-ux-ui-styling/canvas-fonts/PixelifySans-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/PoiretOne-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/PoiretOne-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/RedHatMono-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/RedHatMono-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/RedHatMono-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Silkscreen-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Silkscreen-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/SmoochSans-Medium.ttf
- skills/ui-ux-ui-styling/canvas-fonts/SmoochSans-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Tektur-Medium.ttf
- skills/ui-ux-ui-styling/canvas-fonts/Tektur-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/Tektur-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/WorkSans-Bold.ttf
- skills/ui-ux-ui-styling/canvas-fonts/WorkSans-BoldItalic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/WorkSans-Italic.ttf
- skills/ui-ux-ui-styling/canvas-fonts/WorkSans-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/WorkSans-Regular.ttf
- skills/ui-ux-ui-styling/canvas-fonts/YoungSerif-OFL.txt
- skills/ui-ux-ui-styling/canvas-fonts/YoungSerif-Regular.ttf
- skills/ui-ux-ui-styling/references/canvas-design-system.md
- skills/ui-ux-ui-styling/references/shadcn-accessibility.md
- skills/ui-ux-ui-styling/references/shadcn-components.md
- skills/ui-ux-ui-styling/references/shadcn-theming.md
- skills/ui-ux-ui-styling/references/tailwind-customization.md
- skills/ui-ux-ui-styling/references/tailwind-responsive.md
- skills/ui-ux-ui-styling/references/tailwind-utilities.md
- skills/ui-ux-ui-styling/scripts/requirements.txt
- skills/ui-ux-ui-styling/scripts/shadcn_add.py
- skills/ui-ux-ui-styling/scripts/tailwind_config_gen.py
- skills/ui-ux-ui-styling/scripts/tests/requirements.txt
- skills/ui-ux-ui-styling/scripts/tests/test_shadcn_add.py
- skills/ui-ux-ui-styling/scripts/tests/test_tailwind_config_gen.py
Every link opens the file at its source, pinned to the revision this page describes.