New: 97,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

Official agent skill

React Container Presentation Component

by github in github/awesome-copilot

Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's…

OfficialMITAuto-check passedFrontend & Design

Install React Container Presentation Component

skills CLI
$ npx skills add github/awesome-copilot --skill react-container-presentation-component -a claude-code

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

GitHub CLI
$ gh skill install github/awesome-copilot react-container-presentation-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/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react-container-presentation-component .claude/skills/react-container-presentation-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
react-container-presentation-component
GitHub stars
40k
Token cost
~1k tokens
SKILL.md length
456 words
Files
3 (incl. references)
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's…

  • Works in 3 steps: Component name → Type (ui or features) → Whether to replace existing components…
  • The user explicitly asks for a Container/Presentation-based component
  • SKILL.md covers When To Use, Required Questions, Procedure and Output Contract
  • Calls npm

What it does

React Container Presentation Component is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's TypeScript, Storybook, and SCSS conventions. Use when the user explicitly asks for a Container/Presentation-based component or runs /react-container-presentation-component.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/component-architecture.md` and `references/typescript-and-scss-rules.md`).

It sits in Frontend & Design, covering React components and CSS and styling. It works with React, TypeScript and Storybook. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • The user explicitly asks for a Container/Presentation-based component
  • Runs /react-container-presentation-component

Example prompts

  • “/react-container-presentation-component”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Component name
  2. Type (ui or features)
  3. Whether to replace existing components (only when creating ui)

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. 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

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

React Container Presentation Component loads about 1k tokens when it runs, and up to ~2.7k if it reads all its reference files. Until then it costs about 101 tokens; SKILL.md has 456 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~101
When it runs · the whole SKILL.md, loaded when a task matches
~1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.7k

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 github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 456 words, ~1,034 tokens.

Download SKILL.mdSave it as .claude/skills/react-container-presentation-component/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
react-container-presentation-component
description
Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's TypeScript, Storybook, and SCSS conventions. Use when the user explicitly asks for a Container/Presentation-based component or runs /react-container-presentation-component.
argument-hint
componentName type(ui|features)
user-invocable
true

Container/Presentation Component

Use this skill to create a React component under src/components that follows the Container/Presentation pattern.

Refer to this skill's bundled references for detailed rules.

  • references/component-architecture.md
  • references/typescript-and-scss-rules.md

If the /react-container-presentation-component input is incomplete, ask questions first before creating files.

When To Use

  • When the user runs /react-container-presentation-component
  • When the user explicitly asks for a React component that follows the Container/Presentation pattern
  • When the user wants help deciding or implementing ui vs features classification within the Container/Presentation pattern

Required Questions

If any of the following information is missing, ask the user using ask_user.

  1. Component name
  2. Type (ui or features)
  3. Whether to replace existing components (only when creating ui)

Question requirements:

  • Provide the type as options (ui, features)
  • Require the component name to be in PascalCase
  • For ui, ask whether direct usage of Mantine or other UI libraries in existing features should be replaced with the new component

Procedure

  1. Check existing components
  • Check whether src/components/ui/<ComponentName> or src/components/features/<ComponentName> already exists.
  • If it exists, do not overwrite; confirm the preferred approach with the user.
  1. Decide target directory
  • ui: src/components/ui/<ComponentName>
  • features: src/components/features/<ComponentName>
  1. Re-check classification (only when ui is specified)
  • Even when ui is specified, before creating files, review Reclassification Rule in references/component-architecture.md.
  • If the implementation includes state management, side effects, async processing, context/store updates, or business logic, treat it as features.
  • If the result is closer to features, do not proceed as ui; use ask_user and confirm one of the following before continuing.
    • Create as features
    • Keep ui and move state/logic to parent or features
  1. Create required files
  • ui: index.tsx, index.module.scss, index.stories.tsx
  • features: index.tsx, use<ComponentName>.tsx, presentation.tsx, types.ts, presentation.module.scss, presentation.stories.tsx
  1. Replace existing usages (only when creating ui)
Show full SKILL.md (176 more words)Show less
  • Only when the user approves, replace equivalent direct implementations using Mantine or other UI libraries in existing features with the new ui component.
  1. Validate
  • Run build and lint commands, and ensure both pass; if issues are introduced by newly added or updated files, fix them.
  • Follow Storybook Minimum in references/component-architecture.md for story state decisions.
  • Ask the user via ask_user whether to run a Storybook check (for example: "Run" / "Skip for now").
  • Run npm run storybook only if the user selects "Run".
  • If the user selects "Skip for now", explicitly mention in the final report that Storybook execution was skipped.

Output Contract

  • Report the list of files created.
  • If replacements were performed, report the list of changed files and replacement details.
  • Provide one usage example of the created component.
  • Report whether Storybook verification was executed (run/skip), and if run, include the command used.
  • Explain why the component was classified as ui or features.
  • Summarize where state, side effects, and rendering responsibilities were placed.
  • Confirm whether there were any dependency direction violations.
  • Clearly state any unresolved items.

© github, 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 skills/react-container-presentation-component of github/awesome-copilot.

  • SKILL.md
  • references/component-architecture.md
  • references/typescript-and-scss-rules.md

Open the folder on GitHubat commit 727ff2e

Compare with similar skills

React Container Presentation 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.

React Container Presentation Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Container Presentation Component this skillgithub/awesome-copilot40k—~1kAutomated safety check: PassMIT
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
Frontend Code ReviewProgrammerAnthony/Anything-Extract139—~957Automated safety check: PassMIT
Dokan Frontend Devgetdokan/dokan288—~1.9kAutomated safety check: PassNone
Senior Frontendborghei/Claude-Skills874—~1.7kAutomated safety check: PassMIT
Senior Frontendalirezarezvani/claude-skills28k5 repos~3.9kAutomated safety check: PassMIT

Similar skills

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Frontend Code Review

    ProgrammerAnthony/Anything-Extract

    指导在项目中对前端代码（Next.js/React/TypeScript/Tailwind 等）进行结构、可维护性、性能与一致性审查，基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码（如 .py）。

    139 GitHub stars~957 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Dokan Frontend Dev

    getdokan/dokan

    Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).

    288 GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Senior Frontend

    borghei/Claude-Skills

    Frontend development for React, Next.js, TypeScript, and Tailwind CSS.

    874 GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Senior Frontend

    alirezarezvani/claude-skills

    Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.

    28k GitHub starsUsed in 5 repos~3.9k tokens
    Frontend & DesignAuto-check passed

  • Ink Tui Wizard

    novuhq/novu

    Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

    40k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo

  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed

  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed

  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Categories

Questions about React Container Presentation Component

What does React Container Presentation Component do?

Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's…. React Container Presentation Component is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Create a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's TypeScript, Storybook, and SCSS conventions.

When should I use React Container Presentation Component?

React Container Presentation Component fits situations like: the user explicitly asks for a Container/Presentation-based component; runs /react-container-presentation-component.

How do I install React Container Presentation Component in Claude Code?

Run `npx skills add github/awesome-copilot --skill react-container-presentation-component -a claude-code`. Or copy the skill folder (skills/react-container-presentation-component in github/awesome-copilot) into .claude/skills/react-container-presentation-component in your project. Claude Code loads it when a task matches its description.

How do I install React Container Presentation Component in Codex?

Run `npx skills add github/awesome-copilot --skill react-container-presentation-component -a codex`. Or copy the skill folder (skills/react-container-presentation-component in github/awesome-copilot) into .agents/skills/react-container-presentation-component in your project. Codex loads it when a task matches its description.

Can I use React Container Presentation 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 github/awesome-copilot --skill react-container-presentation-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/react-container-presentation-component, .gemini/skills/react-container-presentation-component, .github/skills/react-container-presentation-component and .opencode/skills/react-container-presentation-component in your project.

What does React Container Presentation Component need to run?

Going by SKILL.md and its folder, React Container Presentation Component needs the command-line tools its instructions call (npm).

Does React Container Presentation Component access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is React Container Presentation 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 React Container Presentation Component use?

React Container Presentation 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 React Container Presentation Component use?

About 1k tokens (SKILL.md is roughly 4.1k 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.7k tokens, read only when the agent opens those files.

What are the alternatives to React Container Presentation Component?

Skills that share tags, products or a category with React Container Presentation Component: Wonder Blocks (Khan/wonder-blocks, 163 stars), Frontend Code Review (ProgrammerAnthony/Anything-Extract, 139 stars), Dokan Frontend Dev (getdokan/dokan, 288 stars) and Senior Frontend (borghei/Claude-Skills, 874 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Container Presentation Component?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.