English | 中文

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

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

/plugin marketplace add ricocc/rico-skills

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

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

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:

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

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:

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

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

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

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

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

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

MIT License

Last Updated: 2026-05-13

• Github: @ricocc

• X: @ricouii

• Blog: ricoui.com

• WeChat: Rico的设计漫想