sharkpepper0729

Shark Style Skill — Design skill for Claude Code

Design community

Shark-Style web admin UI design system — a Claude Code skill with design tokens, component specs, and implementation rules.

How to install Shark Style Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open sharkpepper0729/shark-style-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Shark Style Skill does

Shark-Style web admin UI design system — a Claude Code skill with design tokens, component specs, and implementation rules.

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★
Design UI UX — Design UI/UX systems with style guides, palettes, typography, and component specs 2.8k ★

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

[![Live Preview](https://img.shields.io/badge/Live%20Preview-Open-0071E3?style=flat-square&logo=github)](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