skillshare-ui-website-style
SolidSkillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
Install
Quality Score: 96/100
Skill Content
Details
- Author
- runkids
- Repository
- runkids/skillshare
- Created
- 4 months ago
- Last Updated
- today
- Language
- Go
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
frontend-design
Create distinctive, production-grade frontend interfaces in your product's brand voice. Use this skill when building web components, pages, prototypes, dashboards, HTML/CSS layouts, or any web UI. Generates polished, intentional code that feels genuinely yours, not generic AI-generated output. Always reads your design system tokens before producing any output. Triggers on: "build a page", "create a component", "make a dashboard", "prototype this", "HTML for", "design a screen", "landing page", or any request to style or beautify a web interface.
frontend-design
Visual design systems, UI/UX styling, Tailwind CSS, CSS variables, component libraries (shadcn/ui, Radix UI), design tokens, accessibility (WCAG), responsive layout, dark mode, and Figma-to-code workflows. NOT for React component logic, hooks, or state management (use react-development). NOT for Next.js routing, SSR, or server components (use nextjs-development).
frontend-skill
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
frontend-codex
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.