premium-frontend-design
kv0906/cc-skills · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por kv0906/cc-skills no skills.sh. Instale com: npx skills add kv0906/cc-skills@premium-frontend-design
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- kv0906
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 16
- Forks
- 2
- Last push
- 2026-07-30T14:41:07Z
- Repository state
- ativo
- Language
- TypeScript
- Added
- 2026-08-30 15:22:33
- Updated
- 2026-09-08 15:05:55
- Origin id
kv0906/cc-skills/premium-frontend-design
README
# CC Skills My personal curated and self-developed skills for [Claude Code](https://claude.ai/code). ## Skills ### 🎨 [advanced-frontend-skill](./advanced-frontend-skill/) Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. - WebGL, custom shaders, premium animations - Distinctive aesthetics (Awwwards-level) - Templates for heroes, dashboards, glass components - Framework-flexible (React, Three.js, GSAP, Framer Motion) ### 🎬 [animated-diagram](./animated-diagram/) Build animated technical diagrams (flowcharts, decision trees, pipelines) as Remotion + React videos. - Mermaid as the input language — describe in English, Claude writes Mermaid - Components bake in the design system, dagre auto-layout, and animation patterns - Node/edge reveals on a timeline, plus trace dots that follow a path and light up nodes - Optional CRT shader wrapper for the retro-terminal finish ### 🧩 [explaining-with-ascii](./explaining-with-ascii/) Explain technical systems and abstract concepts with plain language and readable ASCII diagrams. - Clear mental models before implementation details - Flow, branch, loop, architecture, comparison, and state diagrams - Concrete code anchors and language-aware explanations ### 🗣️ [debate-brainstorm](./debate-brainstorm/) Run two independent subagents through a structured debate before synthesizing one answer. - Independent first-round responses - Cross-critique and fact checking - Revised answers and unified synthesis ### 📐 [excalidraw](./excalidraw/) Generate Excalidraw-compatible JSON diagrams for visual documentation. - Flowcharts, system architectures, user journeys - Grid-based layout with precise positioning - Templates for processing loops and decision trees - Output `.excalidraw.json` files for excalidraw.com ### 🧠 [excalidraw-diagram](./excalidraw-diagram/) Generate Excalidraw diagrams that **argue visually** — shapes mirror the concept (fan-outs, timelines, convergence), not uniform card grids. By [coleam00](https://github.com/coleam00/excalidraw-diagram-skill). - Concept-driven layout + evidence artifacts (real code/JSON snippets) - Built-in Playwright render pipeline for visual self-validation - Brand-customizable via a single `color-palette.md` ### 🤖 [ralph](./ralph/) Autonomous AI coding loop with clean slate iterations, PRD-driven features, and CI quality gates. - Long-running autonomous coding tasks - PRD-to-implementation workflow - Quality gates and progress tracking ### 🖼️ [svg-art-skill](./svg-art-skill/) Generate SVG graphics through programmatic Python scripts. - Grid patterns, radial/spiral designs, fractals - Waves, particles, constellations - Data visualizations (bar, line, pie, donut charts) - UI icons library with 40+ icons - SVG optimization and minification ### 📋 [plan-skill](./plan-skill/) Manus-style persistent markdown planning for complex tasks. - 3-file pattern: task_plan.md, notes.md, deliverable - Progress tracking with checkboxes - Error logging and knowledge storage - Context engineering (based on $2B Manus workflow) ## Installation Copy the skill folder to your Claude Code skills directory: ```bash cp -r <skill-folder> ~/.claude/skills/ ``` ## License MIT