Skills for Real Engineers. Straight from my .agents directory.
39 skills
skillshare-ui-website-style
Agent skill from
Skillshare 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, ss-* classes, components, or patterns to use. Covers the two dashboard styles (Clean / Playful) in light and dark, design tokens, the ss-* class system, component API, page structure, accessibility, keyboard shortcuts, and anti-patterns. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
How to install skillshare-ui-website-style
install skillshare-ui-website-style
# install the skillshare pack with the skills CLI
npx skills add runkids/skillshare# or add only this skill to Claude Code: copy the folder
.skillshare/skills/skillshare-ui-website-style/
# into
~/.claude/skills/skillshare-ui-website-style/ (all projects)
.claude/skills/skillshare-ui-website-style/ (one project)
1Enforce the skillshare design system across the two frontends. $ARGUMENTS is the file or area being worked on.23Before acting, run `python3 scripts/ai-context.py frontend`. That topic and the CSS/source files it identifies are the source of truth; this skill retains the component catalog and visual QA checklist.45| Aspect | UI Dashboard (`ui/`) | Website (`website/`) |6|--------|---------------------|----------------------|7| Stack | React 19 + Vite + Tailwind CSS v4 | Docusaurus 3 + custom CSS |8| Source of truth | `ui/src/components.css` (tokens + `ss-*` classes), `ui/src/index.css` (Tailwind mapping) | `website/src/css/custom.css` (docs), `website/src/pages/*.module.css` (homepage, features) |9| Looks | Two styles, **Clean** and **Playful**, each in light and dark | Docs: clean. Homepage: hand-drawn string board |1011**This file names tokens and classes and says when to use them. It does not copy their values.** Colours, radii, fonts and shadows change; read them from the CSS when you need one.1213---1415## UI Dashboard (`ui/`)1617Reference pages: `ui/src/pages/TargetsPage.tsx` (list page), `ui/src/pages/HubPage.tsx` (tabs), `ui/src/pages/ResourcesPage.tsx` (list + tiles + bulk toolbar).1819> Design rules and the reasoning behind them: `references/STYLE_GUIDE.md`.2021### Two styles, two modes2223Style and mode are independent, so every screen has four looks.2425| Axis | Values | How it is set |26|------|--------|---------------|27…
Excerpt shown under the repository's MIT license.
More skills in skillshare
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
Public repository for Agent Skills
20 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
CCCXGHGM+135 skills
Production-grade engineering skills for AI coding agents.
CCCXCU25 skills