本文へ移動
cccskills
無料GitHub で公開

react-component

Generates complete, production-ready React/TypeScript components using Tailwind CSS. Use when building UI components in a React or Next.js project that requires TypeScript, Tailwind styling, and accessible interactions.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

react-component

Generates self-contained React/TypeScript components — plan first, confirm, then produce complete code with no placeholders.

Workflow

  1. Plan: Present a concise pseudocode implementation plan covering structure, state, and key logic.
  2. Confirm: Verify requirements and constraints with the user before writing code.
  3. Code: Write the full implementation. Leave no TODOs, placeholders, or missing pieces.

Code Rules

  • Tailwind only — no CSS files, no inline styles. All styling via Tailwind classes.
  • Conditional classes — use clsx or concise template literals; avoid complex nested ternaries.
  • Handler naming — prefix all event handlers with handle: handleClick, handleKeyDown.
  • Early returns — use them wherever they improve readability.
  • Accessibility — non-native interactive elements (e.g., <div>, <span>) must have tabIndex={0}, aria-label, onClick, and onKeyDown.
  • Types — define prop types explicitly; avoid any.
  • Naming — descriptive variable and function names throughout.

Output Format

  • One self-contained .tsx file with a default export
  • All imports included, component properly named
  • No prose outside the code block in the final answer
  • Must compile in a standard React/Next.js project without modification

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

adhd

無料

Formats output for ADHD-friendly action — lead with the next step, number tasks, restate state, cut fluff. Use when named (adhd), when the user mentions ADHD or focus/executive-function constraints, or when they ask for steps they can execute immediately.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

Devil's-advocate attack on AI workflow designs — threat model, assumption challenges, code critiques, and hypothetical redesigns with no file edits. Use for "attack this design", devil's advocate, or hostile challenge on agents/tools/summarization/tokens. Not for PR peer review (code-review) or self-review that applies fixes (ai-systems-review). Prefer: this skill → decide → ai-systems-review.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

Hostile self-review of recently written AI workflow code that then applies fixes (agents, tools, chat context, summarization, tokens, attachments). Use after generating AI systems code, or when asked to self-review and harden it. Not for PR peer review (code-review) or no-edit devil's-advocate attacks (adversarial-challenge). Prefer: adversarial-challenge → decide → this skill.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

Writes in ASD-STE100 simplified technical English — short sentences, plain words, active voice. Use when the user wants terse technical prose, names this skill, or asks for STE100.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

branding

無料

Builds personal brand assets using Seth Godin's frameworks: signature symbol, slogan, surprise (Purple Cow), salient idea, and signature story. Use when named (branding), or when the user asks for a brand symbol, slogan, tagline, Purple Cow, counterintuitive angle, core idea, brand story, or personal brand positioning.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

Disables the AI's default hedging, diplomatic softening, and social-nicety layers to deliver cold, unfiltered, consequentialist analysis on any topic. Use when the user wants the AI's actual assessment without padding, regardless of how harsh or uncomfortable the honest answer is.

日本語の概要は準備中です。原文の説明を表示しています。

nateslabach/skills62026年9月29日 更新

nateslabach のスキルをすべて見る

このスキルの問題を報告する