An agentic skills framework & software development methodology that works.
Refero design skill and MCP for agent UI research
Refero adds a design research skill plus a read-only MCP connection for agent-led UI work. The skill pushes the agent to research visual styles first, then real screens and flows, before it starts implementation. It also ships bundled guidance for typography, color, spacing, motion, icons, and copywriting.
Builders who want their agent to research real product patterns before designing or coding interfaces.
You can make UI decisions from evidence instead of generic AI defaults.
What it does
Research-first design workflow
The skill requires the agent to gather visual references before implementation starts.
Real app screen and flow access
Live Refero research exposes 150,000+ app screens and 6,000+ user flows for comparison.
Bundled design guidance
The skill includes guidance for typography, color, spacing, motion, icons, and copywriting.
Read-only MCP connection
The repo ships MCP manifests for Codex, Claude Code, Cursor, and Gemini CLI.
Standalone skill install
You can install only the skill when MCP is already configured on the client.
How to get it
- 1Run
codex plugin marketplace add referodesign/refero_skill codex plugin add refero@refero
- 2Run
/plugin marketplace add referodesign/refero_skill /plugin install refero@refero
- 3Run
gemini extensions install https://github.com/referodesign/refero_skill
- 4Use this when the client already has Refero MCP configured or only the design…
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
README

Refero
Refero packages one design skill and one read-only MCP connection for AI design work. The skill makes research mandatory before implementation. With live Refero research, agents can use curated visual styles, 150,000+ real app screens, and 6,000+ user flows from well-designed products.
Install
ChatGPT / Codex
Install Refero from the OpenAI Plugins Directory.
The plugin includes Refero MCP and Refero Skill. Sign in with your Refero account when prompted; no manual MCP config or separate skill installation is needed. Live research requires a paid Refero plan. See the setup guide.
Codex app and CLI — install from GitHub
codex plugin marketplace add referodesign/refero_skill
codex plugin add refero@refero
Restart the app after installation. The first connection opens Refero in the browser for OAuth sign-in.
Claude Code
/plugin marketplace add referodesign/refero_skill
/plugin install refero@refero
Gemini CLI
gemini extensions install https://github.com/referodesign/refero_skill
Cursor
After the marketplace listing is approved, open Cursor's plugin marketplace or run
/add-plugin and search for Refero.
Standalone skill
Use this when the client already has Refero MCP configured or only the design methodology is needed:
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
No account is required for the bundled craft references. Live Refero research uses OAuth
when the MCP client first connects to https://api.refero.design/mcp.
What it does
- Researches visual styles first, then real screens and user flows when the task needs them.
- Extracts concrete patterns and locks references before implementation.
- Applies bundled guidance for typography, color, spacing, motion, icons, and copywriting.
- Keeps design decisions tied to evidence instead of generic AI defaults.
- Checks substantial visual work against the selected direction before handoff.
What is included
skills/refero-design/— the single canonical skill and its references..mcp.json— Refero MCP for Codex and Claude Code plugin installs.mcp.json— Refero MCP for Cursor plugin installs.gemini-extension.json— Gemini CLI extension manifest..codex-plugin/,.claude-plugin/, and.cursor-plugin/— platform metadata.server.json— official MCP Registry metadata.
All connection manifests use the same production endpoint and contain no access tokens.
Existing standalone installations
Older clones placed SKILL.md at the repository root. Remove that old installation and
run the standalone install command again. The current skill lives at
skills/refero-design/SKILL.md; keeping both layouts creates duplicate skills.
For manual installation, copy the entire skills/refero-design/ directory into the
client's skills directory so its references/ files remain beside SKILL.md.
Validate a release
scripts/check-release
The check validates manifests, versions, local links, the canonical MCP URL, package boundaries, and common secret leaks. Platform-native validation and clean-profile install tests are still run before tagging a release.
Security
Report vulnerabilities privately to support@refero.design. See SECURITY.md for details.
License
MIT
Files in the repo
- .agents
- .claude-plugin
- .codex-plugin
- .cursor-plugin
- .github
- assets
- scripts
- skills
- .gitignore
- .mcp.json
- gemini-extension.json
- LICENSE
- mcp.json
- README.md
- SECURITY.md
- server.json
- VERSION
Discussion (0)
Ask about usage, or say what you built with itSign in to join the discussion.
No comments yet. Be the first to say what this is good for.
More skills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.
Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.
Public repository for Agent Skills
Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

Production-grade engineering skills for AI coding agents.