Agent skill

Check Component Readiness

This rule helps in reviewing the component before shipping to make sure all important things are checked

Install Check Component Readiness

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/check-component-readiness .claude/skills/check-component-readiness && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .claude/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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

$skill-installer install https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness

Type 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.

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/check-component-readiness .agents/skills/check-component-readiness && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .agents/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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.

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/check-component-readiness .cursor/skills/check-component-readiness && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .cursor/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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

$ gemini skills install https://github.com/razorpay/blade.git --path .agents/skills/check-component-readiness

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/check-component-readiness .gemini/skills/check-component-readiness && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .gemini/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness

Installs 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).

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/check-component-readiness .github/skills/check-component-readiness && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .github/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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.

skills CLI

$ npx skills add razorpay/blade --skill check-component-readiness -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install razorpay/blade check-component-readiness --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/check-component-readiness .opencode/skills/check-component-readiness && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "check-component-readiness" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/check-component-readiness into .opencode/skills/check-component-readiness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "check-component-readiness", 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: check-component-readiness
GitHub stars: 656
Token cost: ~1.3k tokens
SKILL.md length: 377 words
Files: 1
Skills in repo: 16
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

This rule helps in reviewing the component before shipping to make sure all important things are checked

Works in 9 steps: Component Status Page Update → Manual Testing → KitchenSink Story → …
Tasks that involve Technical documentation
SKILL.md covers Component Shipping Checklist, Reporting Format, File Path Patterns to Look For and Example Patterns
Reaches blade.razorpay.com

What it does

Check Component Readiness is an agent skill from razorpay/blade. This rule helps in reviewing the component before shipping to make sure all important things are checked

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Technical documentation. The repository describes itself as: Design System that powers Razorpay. The licence is MIT.

When your agent uses it

Tasks that involve Technical documentation

Example prompts

“/check-component-readiness”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

Component Status Page Update
Manual Testing
KitchenSink Story
Interaction Tests (if applicable)
Unit Tests
JSDoc Comments
Storybook Documentation
Component Exports
Knowledgebase Update

What it can do on your machine

Read from SKILL.md and the folder at commit fa38cf0. 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
Hosts in commands or code, which the agent is likely to contact:
- blade.razorpay.com
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

Check Component Readiness loads about 1.3k tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 377 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~33
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

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 fa38cf0, republished under its MIT licence (© razorpay). 377 words, ~1,314 tokens.

Download SKILL.mdSave it as .claude/skills/check-component-readiness/SKILL.md (or your agent's skills folder).

name: check-component-readiness
description: This rule helps in reviewing the component before shipping to make sure all important things are checked
disable-model-invocation: true

You are a Design System engineer at Razorpay reviewing Blade components before they are shipped. Your role is to review the component and check if all required items from the shipping checklist are completed, then provide suggestions for any missing items.

You do not update / change anything. You only review and suggest.

Component Shipping Checklist

When a user asks you to review a component before shipping, you must check the following items and report which ones are missing or incomplete:

1. Component Status Page Update

Check if component is added in componentStatusData.ts file

2. Manual Testing

This is typically done by developers and cannot be automatically verified
Remind the user to ensure manual testing has been completed

3. KitchenSink Story

Look for _KitchenSink.{ComponentName}.stories.tsx file in the component directory
Example path: packages/blade/src/components/Button/Button/_KitchenSink.Button.stories.tsx

4. Interaction Tests (if applicable)

Verify if the component requires interaction tests based on its interactive nature
If yes, Look for {ComponentName}.test.stories.tsx file in the component directory
Only check for file existance, don't review the content

5. Unit Tests

Look for test files in __tests__ directories within the component folder
Look for {ComponentName}.web.test.tsx and {ComponentName}.ssr.test.tsx
Only check for file existance, don't review the content

6. JSDoc Comments

JSDoc should exist on props that are exported publically
JSDoc should exist on component that is exported publically with small usage example

Show full SKILL.md (157 more words)Show less

7. Storybook Documentation

{ComponentName}.stories.tsx file exists
It is using StoryPageWrapper and Sandbox component
StoryPageWrapper has componentName, componentDescription, and figmaURL passed to it

8. Component Exports

Verify that only intended components and types are exported from the {ComponentName}/index.ts directory
Ensure that we're re-exporting component without .web or .native extensions
Verify that the component is re-exported from packages/blade/src/components/index.ts

9. Knowledgebase Update

Verify that there is knowledgebase created for this component. Look for {ComponentName}.md inside packages/blade-mcp/knowledgebase/**
Suggest them to run prompt from packages/blade-mcp/knowledgebase/components/prompt.txt to generate this markdown

Reporting Format

Structure your review report as follows:

## Component Review: {ComponentName}

### ✅ Completed Items:
- [List items that are properly implemented with brief verification]

### ❌ Missing/Incomplete Items:
- [List missing items with specific suggestions and file paths]

### 📝 Recommendations:
- [Provide specific actionable steps to complete missing items]

### 🔍 Additional Notes:
- [Any other observations or suggestions for improvement]

File Path Patterns to Look For

Component Directory: packages/blade/src/components/{ComponentName}/
Main Component: packages/blade/src/components/{ComponentName}/{ComponentName}.tsx or packages/blade/src/components/{ComponentName}/{ComponentName}.web.tsx
Stories: packages/blade/src/components/{ComponentName}/**/{ComponentName}.stories.tsx
KitchenSink: packages/blade/src/components/{ComponentName}/**/_KitchenSink.{ComponentName}.stories.tsx
Tests: packages/blade/src/components/{ComponentName}/__tests__/
Component Index: packages/blade/src/components/{ComponentName}/index.ts
Main Index: packages/blade/src/components/index.ts
Component Status Data: packages/blade/src/utils/storybook/componentStatusData.ts

Example Patterns

Good JSDoc Example:

For Props

type ComponentNameProps = {
  /**
   * Children slot.
   *
   * Supports SideNavFooter, SideNavBody
   */
  children: React.ReactNode;
  /**
   * **Only applicable in mobile**
   *
   * State for opening / closing the SideNav in mobile
   */
  isOpen?: DrawerProps['isOpen'];

  // ... other props
};

For Component

tsx

const _ComponentName = () => {
  // implementation
};

// JSDoc should be on exported component
/**
 * {ComponentName}
 *
 * 2 lines description of the component
 *
 * ----
 *
 * #### Usage
 *
 * ```tsx
 * ```
 *
 * ----
 * Checkout {@link https://blade.razorpay.com/?path=/docs/components-{ComponentName in lowercase} {ComponentName} Documentation}
 */
const ComponentName = assignWithoutSideEffect(React.forwardRef(_ComponentName), {
  componentId: '',
  displayName: '',
});

Good Export Example:

typescript

// Component index.ts - only export public API
export { Button } from './Button';
export type { ButtonProps } from './types';

// Main components/index.ts - re-export component
export { Button } from './Button';
export type { ButtonProps } from './Button';

Remember: Your job is to review and suggest, not to implement changes. Provide clear, actionable feedback to help developers complete the shipping checklist.

Files

Just SKILL.md in .agents/skills/check-component-readiness of razorpay/blade.

Open the folder on GitHubat commit fa38cf0

Compare with similar skills

Check Component Readiness 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.

Check Component Readiness compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Check Component Readiness this skillrazorpay/blade	656	—	~1.3k	Automated safety check: Pass	MIT	today
Docs LookupProgrammerAnthony/Expert-Coding-Harness	235	—	~640	Automated safety check: Pass	MIT	5 mo ago
Readme I18nY80/bmm	344	2 repos	~1.9k	Automated safety check: Pass	MIT	4 mo ago
Tabler Class Reference Tablestabler/tabler	42k	—	~1.4k	Automated safety check: Pass	MIT	today
UithingBayBreezy/ui-thing	729	—	~1.3k	Automated safety check: Pass	Custom licence	today
DESIGN.md Creatoribelick/ui-skills	9.5k	—	~4k	Automated safety check: Pass	MIT	2 days ago

Similar skills

Docs Lookup
ProgrammerAnthony/Expert-Coding-Harness
通过 Context7 MCP 获取库和框架的实时最新文档，而非依赖训练数据，防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词：怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API…
235 GitHub stars~640 tokensUpdated 5 mo ago
Frontend & DesignAuto-check passed
Readme I18n
Y80/bmm
A skill your agent uses when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized…
344 GitHub starsUsed in 2 repos~1.9k tokens
Frontend & DesignAuto-check passed
Tabler Class Reference Tables
tabler/tabler
Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.
42k GitHub stars~1.4k tokensUpdated today
Frontend & DesignAuto-check passed
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
729 GitHub stars~1.3k tokensUpdated today
Frontend & DesignAuto-check passed
DESIGN.md Creator
ibelick/ui-skills
Writes or updates a DESIGN.md for one product from its repository or a public URL, recording the design language and tokens that the evidence supports.
9.5k GitHub stars~4k tokensUpdated 2 days ago
Frontend & DesignAuto-check passed
Lofisu Persona
zclllyybb/lofisu-identity-engine
LofiSu的行为人格Skill。基于GitHub公开数据(282次commit/150次README迭代/50+fork/100+contribution) 的Codex深度挖掘分析报告+小红书卖课行为报告的系统蒸馏，提炼6个核心心智模型、8条决策启发式和完整的表达DNA。
454 GitHub stars~2.8k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed

Questions about Check Component Readiness

What does Check Component Readiness do?

This rule helps in reviewing the component before shipping to make sure all important things are checked. Check Component Readiness is an agent skill from razorpay/blade.

When should I use Check Component Readiness?

Check Component Readiness fits situations like: tasks that involve Technical documentation.

How do I install Check Component Readiness in Claude Code?

Run `npx skills add razorpay/blade --skill check-component-readiness -a claude-code`. Or copy the skill folder (.agents/skills/check-component-readiness in razorpay/blade) into .claude/skills/check-component-readiness in your project. Claude Code loads it when a task matches its description.

How do I install Check Component Readiness in Codex?

Run `npx skills add razorpay/blade --skill check-component-readiness -a codex`. Or copy the skill folder (.agents/skills/check-component-readiness in razorpay/blade) into .agents/skills/check-component-readiness in your project. Codex loads it when a task matches its description.

Can I use Check Component Readiness 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 check-component-readiness -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/check-component-readiness, .gemini/skills/check-component-readiness, .github/skills/check-component-readiness and .opencode/skills/check-component-readiness in your project.

What does Check Component Readiness need to run?

SKILL.md names no scripts, command-line tools or credentials: Check Component Readiness is instructions for the agent only.

Does Check Component Readiness access the network?

SKILL.md names 1 domain. In commands or code: blade.razorpay.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Check Component Readiness 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 Check Component Readiness use?

Check Component Readiness 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 Check Component Readiness use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Check Component Readiness?

Skills that share tags, products or a category with Check Component Readiness: Docs Lookup (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), Readme I18n (Y80/bmm, 344 stars), Tabler Class Reference Tables (tabler/tabler, 42k stars) and Uithing (BayBreezy/ui-thing, 729 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Check Component Readiness?

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 9, 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.

Install Check Component Readiness

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Component Shipping Checklist

1. Component Status Page Update

2. Manual Testing

3. KitchenSink Story

4. Interaction Tests (if applicable)

5. Unit Tests

6. JSDoc Comments

7. Storybook Documentation

8. Component Exports

9. Knowledgebase Update

Reporting Format

File Path Patterns to Look For

Example Patterns

Good JSDoc Example:

For Props

For Component

Good Export Example:

Files

Compare with similar skills

Similar skills

More from razorpay/blade

Related

Questions about Check Component Readiness