New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Update Component

by razorpay in razorpay/blade

Update an existing Blade component (web only) using Figma designs and knowledgebase documentation

MITAuto-check passedFrontend & Design

Install Update Component

skills CLI
$ npx skills add razorpay/blade --skill update-component -a claude-code

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

GitHub CLI
$ gh skill install razorpay/blade update-component --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/update-component .claude/skills/update-component && 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/

Facts

Skill name
update-component
GitHub stars
656
Token cost
~1k tokens
SKILL.md length
344 words
Files
1
Skills in repo
16
Repo updated
First seen
Licence
MIT

At a glance

Update an existing Blade component (web only) using Figma designs and knowledgebase documentation

  • Works in 5 steps: Gather Component Information → Get Figma Design Context → Analyze and Plan Changes → …
  • Frontend & Design work in your project
  • SKILL.md covers Usage, Instructions, Component File Structure and Guidelines
  • Reaches figma.com

What it does

Update Component is an agent skill from razorpay/blade. Update an existing Blade component (web only) using Figma designs and knowledgebase documentation

Its SKILL.md is about 1k 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. It works with Figma. The repository describes itself as: Design System that powers Razorpay. The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/update-component”

Workflow steps

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

  1. Gather Component Information
  2. Get Figma Design Context
  3. Analyze and Plan Changes
  4. Make Changes
  5. Check for Errors

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.

    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:

    • figma.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

Update Component loads about 1k tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 344 words of instructions outside code blocks.

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

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). 344 words, ~1,011 tokens.

Download SKILL.mdSave it as .claude/skills/update-component/SKILL.md (or your agent's skills folder).
name
update-component
description
Update an existing Blade component (web only) using Figma designs and knowledgebase documentation
disable-model-invocation
true

Update Component

Update an existing Blade component (web only) using Figma designs and knowledgebase documentation.

Usage

/update-component <ComponentName> <FigmaURL>

Example:

/update-component Popover https://www.figma.com/design/jubmQL9Z8V7881ayUD95ps/Blade-DSL?node-id=115756-259386

Instructions

Step 1: Gather Component Information

  1. Read the knowledgebase documentation:

    • Path: packages/blade-mcp/knowledgebase/components/<ComponentName>.md
    • Contains: TypeScript types, props, and usage examples

  2. Read the existing component implementation:

    • Path: packages/blade/src/components/<ComponentName>/
    • Key files: types.ts, <ComponentName>.web.tsx, index.ts, constants.ts
    • Skip native files - Only update .web.tsx files
Step 2: Get Figma Design Context

Parse the provided Figma URL to extract:

  • fileKey: The unique file identifier from the URL path
  • nodeId: From node-id= param, convert - to : (e.g., 115756-259386 → 115756:259386)

Use the Figma MCP tools to get complete design information:

2.1 Get Design Context (Component Structure)
Tool: user-Figma → get_design_context
Arguments:
  - fileKey: "<extracted-file-key>"
  - nodeId: "<extracted-node-id>"
  - clientLanguages: "typescript"
  - clientFrameworks: "react"
  - disableCodeConnect: true

Returns:

  • Component hierarchy and structure
  • CSS/styling classes (Tailwind format)
  • Component descriptions and documentation links
  • Asset URLs for images/icons
2.2 Get Variable Definitions (Design Tokens)
Tool: user-Figma → get_variable_defs
Arguments:
  - fileKey: "<extracted-file-key>"
  - nodeId: "<extracted-node-id>"
  - clientLanguages: "typescript"
  - clientFrameworks: "react"

Returns a JSON object with all design tokens used in the component.

2.3 Get Screenshot (Visual Reference)
Tool: user-Figma → get_screenshot
Arguments:
  - fileKey: "<extracted-file-key>"
  - nodeId: "<extracted-node-id>"

Returns a visual screenshot of the component for reference.

Step 3: Analyze and Plan Changes

Compare the Figma design with the current implementation:

  1. Compare design tokens: Match Figma variable values with existing Blade constants
  2. Identify new props or variants: Check if new configurations are needed
  3. Check types: Determine if TypeScript types need updating
  4. Plan implementation: Focus on web only (.web.tsx files)
  5. Plan documentation updates: If API changes, update knowledgebase docs
Step 4: Make Changes

Follow this order:

  1. Update types (types.ts) - Add new props, update existing types
  2. Update constants (constants.ts) - Add new defaults or constants
  3. Update web implementation (*.web.tsx) - Implement the changes
  4. Update exports (index.ts) - Export new types/components if needed
  5. Update knowledgebase (packages/blade-mcp/knowledgebase/components/<ComponentName>.md)
  6. Update stories (*.stories.tsx) - Add Storybook examples for new features
Step 5: Check for Errors

Use ReadLints tool on modified files to check for linter errors and fix them.

Component File Structure

packages/blade/src/components/<ComponentName>/
├── __tests__/
├── _decisions/
│   └── decisions.md
├── constants.ts
├── index.ts
├── <ComponentName>.native.tsx   ← IGNORE (native)
├── <ComponentName>.stories.tsx
├── <ComponentName>.web.tsx      ← UPDATE THIS
└── types.ts

Guidelines

  • Web only: Only update .web.tsx files, ignore .native.tsx
  • Follow existing patterns: Study similar components for consistency
  • Maintain backward compatibility: Don't remove existing props without deprecation
  • Keep knowledgebase in sync: Always update the documentation
  • Use design tokens: Use theme tokens instead of hardcoded values

© 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

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

Open the folder on GitHubat commit e65bdec

Compare with similar skills

Update Component 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.

Update Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Update Component this skillrazorpay/blade656—~1kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Figma Design System Rules Generatorwarpdotdev/warp65k3 repos~4.6kAutomated safety check: PassAGPL-3.0
Figma Code Connect Componentswarpdotdev/warp65k2 repos~4.2kAutomated safety check: PassAGPL-3.0

Similar skills

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Rules Generator

    warpdotdev/warp

    Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

    65k GitHub starsUsed in 3 repos~4.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Code Connect Components

    warpdotdev/warp

    Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.

    65k GitHub starsUsed in 2 repos~4.2k tokens
    Frontend & DesignAuto-check passed

  • Cc Design

    ZeroZ-lab/cc-design

    High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.

    827 GitHub stars~2.2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes

More from razorpay/blade

All 16 skills in this repo

  • Review PR

    razorpay/blade

    Review blade PRs by fetching diff, checking CI status, and getting Storybook URL.

    656 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Migrate To Rn

    razorpay/blade

    Add React Native support (.native.tsx files) to Blade components that currently only have web implementations.

    656 GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Migrate To Svelte

    razorpay/blade

    Orchestrate parallel migration of Blade React components to Svelte 5.

    656 GitHub stars~4.7k tokensUpdated today
    Auto-check passed

  • UI Code Guidelines

    razorpay/blade

    Important guidelines for writing frontend UI code. An agent skill from razorpay/blade.

    656 GitHub stars~866 tokensUpdated today
    Auto-check passed

  • Heal PR

    razorpay/blade

    Heal a Blade PR by fixing CI failures, missing changesets, and sanity issues.

    656 GitHub stars~414 tokensUpdated today
    Auto-check passed

  • Resolve Comments

    razorpay/blade

    Resolve PR review comments by pushing code fixes or replying with explanations.

    656 GitHub stars~647 tokensUpdated today
    Auto-check: warnings

Works with

Categories

Questions about Update Component

What does Update Component do?

Update an existing Blade component (web only) using Figma designs and knowledgebase documentation. Update Component is an agent skill from razorpay/blade.

When should I use Update Component?

Update Component fits situations like: frontend & Design work in your project.

How do I install Update Component in Claude Code?

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

How do I install Update Component in Codex?

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

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

What does Update Component need to run?

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

Does Update Component access the network?

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

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

Update Component 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 Update Component use?

About 1k tokens (SKILL.md is roughly 4k 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 Update Component?

Skills that share tags, products or a category with Update Component: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Design System Rules Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Update Component?

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.