Shark Style Skill
Description
Shark-Style web admin UI design system — a Claude Code skill with design tokens, component specs, and implementation rules
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
ui-spec — Shark-Style Unified Design System for Claude Code
A [Claude Code skill](https://docs.anthropic.com/en/docs/claude-code/skills) that injects a complete Shark Design Language into every UI code generation session — covering both **Web Admin** (desktop) and **Mobile C-End** (iOS-style phone preview).
Type `/ui-spec` for web admin dashboards, or `/mobile-spec` for mobile app screens. Claude instantly knows every color token, type scale, spacing rule, component spec, and animation timing — and applies them precisely to whatever code it writes.
Preview
[](https://sharkpepper0729.github.io/shark-style-skill/preview.html)
直接在浏览器中查看完整视觉规范：**https://sharkpepper0729.github.io/shark-style-skill/preview.html**
Open [`preview.html`](./preview.html) locally, or visit the live link above to see the full visual specification:
- Color system (system colors, grays, semantic colors)
- Typography scale (11 levels, SF Pro / -apple-system)
- Spacing, border radius, shadow levels
- Web components: Buttons, Inputs, Toggle, Segmented Control, Alert, Badge, Card, Modal, List, Navbar, Breadcrumb, Search
- Mobile components: Device shell, Status bar, Dynamic Island, Tab Bar, Product Card, Carousel, FAB
What's inside
Shared Design Tokens (Web & Mobile)
| Category | Tokens |
|---|---|
| Colors | 9 system colors + 6 grays + semantic text / bg / fill / separator |
| Typography | 11-level type scale, SF Pro font stack, weight rules |
| Spacing | 8px-grid scale (4px → 80px) |
| Border Radius | 7 levels (4px → full capsule) |
| Shadows | 5 elevation levels + frosted glass material |
| Animation | 4 duration tokens + 4 easing curves + motion rules |
Web Admin (`/ui-spec`)
| Category | Details |
|---|---|
| Layout | 3 breakpoints (735 / 1068px), sidebar, navbar |
| Components | Button, Input, Toggl |
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations