Readydesign Skill

Force UI work onto six ready-to-use libraries only: shadcn/ui, Ant Design, Kokonut UI, Motion (motion.dev), Bklit (bklit.com), and sashimi UI. Web-fetch each official site one-by-one and install the real components from those pages — never invent APIs, class names, colors, or components from memory. Use when building or restyling a UI, scaffolding a frontend, adding components, picking a design system, or when the user says ReadyDesign, ready-to-use components, shadcn, antd, kokonut, motion.dev, framer motion, bklit, sashimi, or runs /readydesign-skill or $readydesign-skill.

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add ZethRise/ReadyDesign-Skill --skill readydesign-skill
Manual install
git clone --depth 1 https://github.com/ZethRise/ReadyDesign-Skill.git /tmp/ReadyDesign-Skill
mkdir -p ~/.claude/skills
cp -r /tmp/ReadyDesign-Skill/. ~/.claude/skills/readydesign-skill

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

From the SKILL.md

# ReadyDesign

UI may come only from these six official sources. Fetch their live docs
one-by-one and install what those pages actually ship. Memory, training
data, and "shadcn-like" custom rebuilds are not allowed.

## Allowed sources

Fetch these pages. Do not substitute blogs, YouTube, or memory.

| Source | Use for | Catalog / start here | Then open |
|---|---|---|---|
| [shadcn/ui](https://ui.shadcn.com) | App primitives: button, form, dialog, table, sidebar | https://ui.shadcn.com/llms.txt | https://ui.shadcn.com/docs/components and the component URL listed there |
| [Ant Design](https://ant.design) | Enterprise / data-dense controls | https://ant.design/components/overview | https://ant.design/components/`<name>` or https://ant.design/components/`<name>`.md |
| [Kokonut UI](https://kokonutui.com) | Decorative / marketing sections, animated extras | https://kokonutui.com/docs | The component page you will install from |
| [Motion](https://motion.dev) | All animation and gesture motion | https://motion.dev/docs/react | The specific guide (animation, gestures, layout, presence) plus https://motion.dev/examples |
| [Bklit](https://bklit.com) | Charts and data visualization | https://bklit.com/docs/components | https://bklit.com/docs/installation then the chart page you will add |
Read the full skill on GitHub

Details

Skill name
readydesign-skill
License
MIT
Repo updated
18 August 2026

FAQ

What does the Readydesign Skill skill do?

Force UI work onto six ready-to-use libraries only: shadcn/ui, Ant Design, Kokonut UI, Motion (motion.dev), Bklit (bklit.com), and sashimi UI. Web-fetch each official site one-by-one and install the real components from those pages — never invent APIs, class names, colors, or components from memory. Use when building or restyling a UI, scaffolding a frontend, adding components, picking a design system, or when the user says ReadyDesign, ready-to-use components, shadcn, antd, kokonut, motion.dev, framer motion, bklit, sashimi, or runs /readydesign-skill or $readydesign-skill.

How do I install the Readydesign Skill skill?

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

Is Readydesign Skill popular?

It lives in ZethRise/ReadyDesign-Skill, which has 14 GitHub stars and 0 forks.

Related skills

Netops

12

Con-Benksl/NetOps

Route authorized VPS networking and proxy work to onboarding, read-only scanning, building, repair, or fleet management. Use for VPS access, 3x-ui/Xray/VLESS Reality/Hysteria2, DNS/TUN/routing failures, node performance, or ongoing multi-VPS operations. 典型中文请求:VPS 连不上、节点慢或掉线、搭建或修改节点、面板打不开、多台 VPS 统一维护。

Frontend & Design

Experiment Report Skill

12

lyzbcy/experiment-report-skill

Create a complete experiment report workflow with frontend visualization and structured markdown report. Supports any experiment type — implementation, interactive frontend, screenshots, and md/docx delivery. Use for 实验报告、experiment report and experiment-related 前端展示 or 可视化报告, with visual confirmation before the final report.

Frontend & Design

Ship Page

12

Zooeyii/ship-page-skill

Create stunning, interactive landing pages for products, startups, and side projects — zero dependencies, single HTML file. Use this skill whenever the user wants to build a landing page, product page, launch page, marketing page, or any promotional web page for their app, tool, SaaS, open-source project, or personal brand. Also triggers when users say "I need a website for my product", "help me launch", "make a page for my app", or want to convert a README into a visual landing page. Works great for Product Hunt launches, GitHub project pages, and indie hacker ship days.

Frontend & Design

Filemaker Layout Xml

15

andykear/FileMaker-XMLsnippet-Layout-Claude-Skill

Use this skill whenever the user wants to work with FileMaker layout XML. This includes generating paste-ready layout object XML (fmxmlsnippet type LayoutObjectList) from descriptions, reviewing layout XML for silent paste-handler failures, or analysing Save as XML layout exports. Trigger any time the user mentions FileMaker layouts, layout objects, fields, portals, tab controls, popovers, button bars, web viewers, anchoring or autosizing, or LayoutObjectList. Always perform the theme pre-flight before generating, and set object anchoring deliberately whenever an object must resize with the wi

Frontend & Design

Taxue Halftone

12

taxueseek/taxue-halftone

半调海报:用限墨+网点把任意主题做成有结构、有质感、可复用的艺术封面。支持多种印刷语言(半调/孔版/双色/木刻/蓝晒/蓝染/复印机、1-bit 剪影、撕纸拼贴),按风格给出一致又有特色的封面。六项不变式出图前先定:纸色、墨色角色、叠印方式、印刷机制、主体走向、字图音量。触发词:半调海报、艺术封面、网点、孔版、双色、Riso、duotone、木刻、蓝晒、蓝染、蓝染海报、物影、蓝晒物影、反俗套蓝染、复印机美学、不完美印刷拼贴、撕纸拼贴、编辑型印刷拼贴、有意不完美、点阵解构、丝网海报、剪纸、窗花、中式剪纸、网点剪纸、经典致敬、风格模仿、致敬、名画、艺术流派、年代美学、视觉风格转译、波普、波点、圆点场、点画、视错觉、扁平矢量图形、艺术展览海报、平台封面(B站/小红书/抖音/公众号/头像/超宽)、主题结构印刷封面、限墨封面。不用于:全彩实拍、UI、图表、模板拼贴。

Frontend & Design

Design Tokens

15

ilikescience/design-tokens-skill

Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

Frontend & Design

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