Stylekit

Apply StyleKit visual styles and public assets when building, restyling, or reviewing UI. Use for named StyleKit styles, visual direction, mobile interface patterns, and component-library selection; preserve the target platform and existing product behavior.

38 stars 4 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add AnxForever/stylekit-skill --skill stylekit

Manual install

git clone --depth 1 https://github.com/AnxForever/stylekit-skill.git /tmp/stylekit-skill
mkdir -p ~/.claude/skills
cp -r /tmp/stylekit-skill/. ~/.claude/skills/stylekit

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# StyleKit

Use StyleKit to give frontend UI a recognizable visual direction. Begin with the user's goal and the target project's existing structure; a style spec guides the design but does not replace product decisions.

## Start with the installed copy

`<skill-root>` is the directory containing this file, not the target project's `scripts/` directory. Scripts require Python 3.10+. Replace placeholders with real paths and keep paths quoted. Save task artifacts in a new task-specific directory (`<work-dir>` below); do not reuse another task's spec file.

For a pinned tag/commit installation, disable updates before the first check. Otherwise run:

```bash
python3 "<skill-root>/scripts/update-skill.py" --auto
```

On `UPDATED`, reread this file. Other statuses continue with the installed instructions; offline checks do not block work. Updates follow GitHub `main` at most once per 24 hours and skip the entire update when managed files have local changes or path collisions. See [updates](references/updates.md) for pinning, controls, migration, and recovery; do not remove local protections to make a check pass.

## Route the actual task

| Request | Approach |
| --- | --- |
| Build new UI | Choose a direction, load its spec, implement the actual content and states. |
| Restyle or fix existing UI | Preserve behavior, routing, and data; change the relevant visual decisions. |

Read the full skill on GitHub

Details

Skill name: stylekit
Repository: AnxForever/stylekit-skill
License: MIT
Repo updated: 20 October 2026

FAQ

What does the Stylekit skill do?

How do I install the Stylekit skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add AnxForever/stylekit-skill --skill stylekit. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Stylekit popular?

It lives in AnxForever/stylekit-skill, which has 38 GitHub stars and 4 forks.

Related skills

Jiujiastudy

jiujiastudy/jiujiastudy

救驾（jiujiastudy）是留学生的 Canvas / Moodle 学习手帐：盯 deadline、排本周该学什么、按状态给建议。用户提到课程、作业、deadline、考试、Canvas、Moodle、老师，或说「现在什么情况」「最近要交什么」「这周学什么」「做完了」「没状态 / 累 / 来不及」「交之前检查」「想问老师」「做学习页」「一直在拖 / 开不了头」时使用；第一次用时自己完成设置，只向用户要学校网址（Canvas 另要 token）。

Frontend & Design10

Design Md

arumwu/design-md-skill

Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.

Frontend & Design

Product Promo Animation

jitOffice/jit-motion

Generate a single-file, self-contained HTML product promotional animation video (15-30s) from a product brief/PRD. Produces a multi-scene GSAP timeline storyboard, a four aspect-ratio switcher (16:9/4:3/1:1/9:16), a zero-emoji SVG icon system, brand colors harvested from the official site, playback controls, and SEO video metadata. Use when the user asks for a product promo animation, marketing/ad video, animated HTML demo, or product launch video, or mentions building a product video with GSAP/motion/SVG. 基于产品需求文档/PRD/简介生成单文件、自包含的 HTML 产品宣传动画视频；当用户要求制作产品宣传动画、营销/广告视频、HTML 动画演示或产品发布视频时使用。

Frontend & Design

Canvas Cowork

flowith-ai/canvas-cowork

Generate text, images and videos on Flowith's canvas from the CLI, headless or with a live cursor. Use for any image/video generation (Seedance, Veo, Kling, gpt-image, Gemini image), "canvas", "Flowith", "Neo", drawing/creating visual content, or past canvas work. /canvas-cowork

Frontend & Design

Clone Team

Varalix-Digitech-Solutions/clone-team

Clone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-perfect UI clone AND produce thorough architecture documentation of how the site works. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, mirror, or copy a website — especially when they want it done thoroughly, in a specific tech stack (React, Vue, Svelte, Angular, etc.), behind a login, or with proper documentation. Triggers on "clone this site", "rebuild this app", "make a copy of <u

Frontend & DesignIn 1 list

Vibe to UI

MonkeyUI-dev/vibe-to-ui

Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-devi

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.