Preline UI Components via MCP
htmlstreamofficial/preline
Adds Preline UI components and blocks to HTML files by querying the Preline MCP server, with rules for exact slugs and for clarifying vague requests.
Important guidelines for writing frontend UI code. An agent skill from razorpay/blade.
Install UI Code Guidelines
$ npx skills add razorpay/blade --skill ui-code-guidelines -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install razorpay/blade ui-code-guidelines --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .claude/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .claude/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add razorpay/blade --skill ui-code-guidelines -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install razorpay/blade ui-code-guidelines --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .agents/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .agents/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add razorpay/blade --skill ui-code-guidelines -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install razorpay/blade ui-code-guidelines --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .cursor/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .cursor/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/razorpay/blade.git --path packages/blade-mcp/skillTemplate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add razorpay/blade --skill ui-code-guidelines -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install razorpay/blade ui-code-guidelines --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .gemini/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .gemini/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install razorpay/blade ui-code-guidelinesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add razorpay/blade --skill ui-code-guidelines -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .github/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .github/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add razorpay/blade --skill ui-code-guidelines -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install razorpay/blade ui-code-guidelines --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/blade-mcp/skillTemplate .opencode/skills/ui-code-guidelines && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-code-guidelines" agent skill from https://github.com/razorpay/blade/tree/master/packages/blade-mcp/skillTemplate into .opencode/skills/ui-code-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-code-guidelines", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-code-guidelines- GitHub stars
- 656
- Token cost
- ~866 tokens
- SKILL.md length
- 422 words
- Files
- 3 (incl. references)
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- MIT
At a glance
Important guidelines for writing frontend UI code. An agent skill from razorpay/blade.
- Tasks that involve Frontend development
- SKILL.md covers Layouts in Blade and Common Utility Types
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Tasks that involve MCP servers
What it does
UI Code Guidelines is an agent skill from razorpay/blade. Important guidelines for writing frontend UI code. Ensures consistent, correct component usage via Blade MCP and Includes common utility types and blade styled props types that are used in frontend code.
Its SKILL.md is about 870 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/common-utility-types.md` and `references/styled-props-types.md`).
It sits in Frontend & Design, covering Frontend development, MCP servers and Skill authoring. It works with Model Context Protocol. The repository describes itself as: Design System that powers Razorpay. The licence is MIT.
When your agent uses it
- Tasks that involve Frontend development
- Tasks that involve MCP servers
- Tasks that involve Skill authoring
Example prompts
- “/ui-code-guidelines”
What it can do on your machine
Read from SKILL.md and the folder at commit e65bdec. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI Code Guidelines loads about 866 tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 56 tokens; SKILL.md has 422 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from razorpay/blade at commit e65bdec, republished under its MIT licence (© razorpay). 422 words, ~866 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-code-guidelines/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- ui-code-guidelines
- description
- Important guidelines for writing frontend UI code. Ensures consistent, correct component usage via Blade MCP and Includes common utility types and blade styled props types that are used in frontend code.
- metadata.version
- 1.0.0
You are Razorpay's Frontend Engineer who knows how to use our design system called "blade". Rather than using outdated knowledge of blade, you effectively use Blade MCP to learn things about blade components before answering questions or creating / updating UI code. When asked to write some frontend code, you always prefer blade components over custom components to bring consistency in the UI.
- You always learn and understand blade components and patterns through Blade MCP before answering questions or writing frontend code.
- You always use Blade components only and don't write custom styles unless extremely required
- You fix any TypeScript, ESlint errors, or Terminal errors that occur and refer to component docs of that component from Blade MCP again if you're unable to figure out props and prop types on your own
- You figure out if there is a pattern available in blade based on the task and fetch that pattern docs before using components.
- You have general understanding on how to do layouts using blade using Box component and Styled Props, you know what
StyledPropsBladetype refers to by learning about it from ui-code-guidelines skill and hence understand what spacing values blade supports, and how to do responsive layout in blade. E.g. blade does not supportmargin={0}ormargin="0"and only supportsmargin="spacing.3"ormargin="24px"etc - You effectively install or suggest installing relevant libraries (e.g.
react-router-domwith SideNav or TopNav) - While building complex layouts, you breakdown the task into smaller subtasks and then build these complex layouts part-by-part
- You use minimal version of components unless explicitly asked for a certain usecase. E.g. don't add size prop / color prop etc unless you explicitly know which one to use
- After completing all code edits in a single operation, and just before drafting your final summary to the user, call the
publish_lines_of_code_metrictool exactly once. Pass the aggregate counts of lines added and removed across all edited files.
Show full SKILL.md (107 more words)Show less
Layouts in Blade
Here's how you can create layouts in blade
Box Component
Box is a generic layout component that renders div by default. Checkout Box component documentation from Blade MCP.
Styled Props
Blade also supports definitive styled props on several components to modify styles so that the UI is generated in defined guidelines of Razorpay's brand language.
Styled Props are supported on components that use StyledPropsBlade type
StyledPropsBlade Type
See the styled props type reference for complete type definitions of StyledPropsBlade, SpacingValueType, MarginProps, FlexboxProps, PositionProps, GridProps, and Spacing.
Usage
// vertical margin for button
<Button marginY="spacing.3" variant="primary">Hello, World</Button>
// responsive position
<Badge position={{base: 'relative', m: 'fixed'}}>
Hello, World
</Badge>Common Utility Types
See the common utility types reference for type definitions of TestID, DataAnalyticsAttribute, FeedbackColors, Breakpoints.
© razorpay, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references) in packages/blade-mcp/skillTemplate of razorpay/blade.
- SKILL.md
- references/common-utility-types.md
- references/styled-props-types.md
Open the folder on GitHubat commit e65bdec
Compare with similar skills
UI Code Guidelines next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Code Guidelines this skillrazorpay/blade | 656 | — | ~866 | Automated safety check: Pass | MIT | |
| Preline UI Components via MCPhtmlstreamofficial/preline | 6.5k | — | ~2.9k | Automated safety check: Pass | Custom licence | |
| MCP App Builderanthropics/claude-plugins-official | 38k | — | ~4.7k | Automated safety check: Pass | Apache-2.0 | |
| Control Chromewxtsky/byob | 132 | — | ~1.5k | Automated safety check: Warn | MIT | |
| Skill Seekers Builderyusufkaraaslan/Skill_Seekers | 15k | — | ~760 | Automated safety check: Pass | MIT | |
| DocsPrefectHQ/fastmcp | 28k | — | ~1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
MCP App Builder
anthropics/claude-plugins-official
Guides building an MCP app: an MCP server that also serves interactive UI widgets such as forms, pickers and confirm dialogs, rendered inline in chat hosts like Claude and ChatGPT.
Control Chrome
wxtsky/byob
Control and inspect the user's real Google Chrome through byob's local MCP tools.
Skill Seekers Builder
yusufkaraaslan/Skill_Seekers
Detects the type of a knowledge source and uses the Skill Seekers MCP tools to turn docs, repos, PDFs or videos into packaged AI skills.
Docs
PrefectHQ/fastmcp
Write or revise a page under docs/ for gofastmcp.com. An agent skill from PrefectHQ/fastmcp.
- Official
Mistral Vibe Plugin Creator
mistralai/mistral-vibe
Shows how to build a Vibe plugin package in the Agent Plugins 1.0 format, with a plugin.json manifest and optional skills, MCP servers, hooks and other components.
More from razorpay/blade
All 16 skills in this repoReview PR
razorpay/blade
Review blade PRs by fetching diff, checking CI status, and getting Storybook URL.
Migrate To Rn
razorpay/blade
Add React Native support (.native.tsx files) to Blade components that currently only have web implementations.
Migrate To Svelte
razorpay/blade
Orchestrate parallel migration of Blade React components to Svelte 5.
Heal PR
razorpay/blade
Heal a Blade PR by fixing CI failures, missing changesets, and sanity issues.
Resolve Comments
razorpay/blade
Resolve PR review comments by pushing code fixes or replying with explanations.
Check Component Readiness
razorpay/blade
This rule helps in reviewing the component before shipping to make sure all important things are checked
Related
Works with
Categories
Questions about UI Code Guidelines
What does UI Code Guidelines do?
Important guidelines for writing frontend UI code. An agent skill from razorpay/blade. UI Code Guidelines is an agent skill from razorpay/blade. Important guidelines for writing frontend UI code.
When should I use UI Code Guidelines?
UI Code Guidelines fits situations like: tasks that involve Frontend development; tasks that involve MCP servers; tasks that involve Skill authoring.
How do I install UI Code Guidelines in Claude Code?
Run `npx skills add razorpay/blade --skill ui-code-guidelines -a claude-code`. Or copy the skill folder (packages/blade-mcp/skillTemplate in razorpay/blade) into .claude/skills/ui-code-guidelines in your project. Claude Code loads it when a task matches its description.
How do I install UI Code Guidelines in Codex?
Run `npx skills add razorpay/blade --skill ui-code-guidelines -a codex`. Or copy the skill folder (packages/blade-mcp/skillTemplate in razorpay/blade) into .agents/skills/ui-code-guidelines in your project. Codex loads it when a task matches its description.
Can I use UI Code Guidelines in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add razorpay/blade --skill ui-code-guidelines -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-code-guidelines, .gemini/skills/ui-code-guidelines, .github/skills/ui-code-guidelines and .opencode/skills/ui-code-guidelines in your project.
What does UI Code Guidelines need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Code Guidelines is instructions for the agent only.
Does UI Code Guidelines access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is UI Code Guidelines safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI Code Guidelines use?
UI Code Guidelines is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI Code Guidelines use?
About 866 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.
What are the alternatives to UI Code Guidelines?
Skills that share tags, products or a category with UI Code Guidelines: Preline UI Components via MCP (htmlstreamofficial/preline, 6.5k stars), MCP App Builder (anthropics/claude-plugins-official, 38k stars), Control Chrome (wxtsky/byob, 132 stars) and Skill Seekers Builder (yusufkaraaslan/Skill_Seekers, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Code Guidelines?
razorpay (a GitHub organization) maintains it in razorpay/blade, which has 656 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.
Source: razorpay/blade on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.