rico-skills

rico-skills

English | 中文

Claude Code Skills for content creation, design optimization, and resource curation.

---

Installation

Quick Install

npx skills add https://github.com/ricocc/rico-skills

Or via Plugin Marketplace

/plugin marketplace add ricocc/rico-skills

Note: Plugin marketplace requires the repository to be published to GitHub.

---

Available Skills

rico-resource-article

Resource Recommendation Article Generator - Create high-quality curated content articles through multi-turn interaction.

Trigger when: User explicitly wants to generate a recommendation article (must include action + article intent)

# ✅ Correct triggers
Write a recommendation article about shadcn/ui component libraries, recommend 8
生成一篇关于 shadcn/ui 组件库的推荐文章，推荐 8 个
帮我写一个 Figma 插件推荐文章
Create a resource list article about Python frameworks

# ❌ Don't trigger (just answering questions)
What are good React component libraries?
推荐 8 个组件库

Workflow:

1. Collect - AI gathers candidate items based on topic
2. Confirm - User confirms the list
3. Title - AI generates 3 title options, user selects
4. Article - Full article with Front Matter, descriptions, screenshots

Output:

• Markdown article with YAML Front Matter
• Each item: name, description, key features, official link
• Optional automatic screenshots via ScreenshotOne or urlscan.io

📄 Detailed Guide: guides/rico-resource-article.md

---

rico-ui-ux-themes

Website Design Optimization - One-click visual design optimization with 20 built-in themes.

This skill supports two trigger modes:

Mode 1: Explicit Commands (with rico prefix)

rico optimize this website
rico use Claude style
rico create theme: stripe.com

Mode 2: Natural Language

Make my website look more professional
帮我优化一下这个页面的设计
Make it look like Linear

Available Commands:

Command	Description
rico use [theme] style	Apply built-in theme
rico create theme: [url]	Generate theme from website
rico list themes	Show all available themes
rico show [theme] theme	View theme details
rico combine [theme-A] colors + [theme-B] borders	Mix themes

20 Built-in Themes:

• Developer Tools: Claude, Minimal Blue, Marketplace Dark, SaaS Dark
• AI Agents: Agent Dark, Creative Vitality
• Enterprise: Professional Blue, Trust Finance, Dashboard Clean
• Creative: Retro Vibrant, Creative Gallery, Neo-Brutalist
• Audio/Music: Radio Static, Record Club, Spotify
• E-commerce: Vibrant Commerce
• Brand Style: Airbnb, Linear, Notion, Duolingo

Fine-tuning (natural language):

User: Colors too dark → AI adjusts lighter
User: Larger border-radius → AI increases to 12px

📄 Detailed Guide: guides/rico-ui-ux-themes.md

---

rico-design-md

Design System Document Generator - Convert any website into design system documents, or convert between design token formats.

Trigger when: User wants to create DESIGN.md, extract design tokens, analyze a brand's design system, or convert between formats.

# ✅ Correct triggers
rico DESIGN.md https://linear.app
rico tokens https://stripe.com
rico 全部输出 github
Create a DESIGN.md for linear.app
Extract design tokens from stripe.com
分析 GitHub 的设计系统

# Format conversion
rico 把 DESIGN.md 转为 tokens

5 Output Formats:

File	Format	Description
DESIGN.md	Markdown	Full style reference with brand voice, tokens, components
preview.html	HTML	Self-contained visual design system preview page
tokens.json	DTCG JSON	Standard design tokens, compatible with style dictionary
variables.css	CSS	CSS custom properties grouped by category
theme.css	CSS	Tailwind v4 @theme format

Default: rico DESIGN.md [url] generates both DESIGN.md + preview.html.

Output saved to: themes/{brand-slug}/

📄 Detailed Guide: guides/rico-design-md.md

---

Skill Overview

Skill	Purpose	Key Features
rico-resource-article	Generate curated content articles	Step-by-step workflow, any domain, optional screenshots
rico-ui-ux-themes	Optimize website design	20 themes, reverse engineer any site, natural language tweaks
rico-design-md	Extract design systems from websites	5 output formats, format conversion, visual preview

---

Configuration

Basic Usage

All skills work out of the box. No configuration required.

Optional: Screenshot Service

For automatic screenshots in rico-resource-article:

mkdir -p .rico-skills
cp .env.example .rico-skills/.env
# Add your API keys to .rico-skills/.env

Services:

• ScreenshotOne - 100/month free
• urlscan.io - 5,000/day free

---

Update

/plugin
# Navigate to Marketplaces → rico-skills → Update marketplace

---

License

MIT License

---

Last Updated: 2026-05-13

• Github: @ricocc

• X: @ricouii

• Blog: ricoui.com

• WeChat: Rico的设计漫想