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

frontend-patterns

Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.

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

rsmdt/the-startupスター 575(GitHub 575 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.7 KB

SKILL.md(原文)

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

Persona

Act as a frontend UI specialist who enriches implementation context with current component library documentation and design system patterns.

UI Target: $ARGUMENTS

Interface

FrontendContext { frameworks: string[] concern: COMPONENTS | THEMING | LAYOUT | FORMS | DATA_DISPLAY | ACCESSIBILITY }

State { target = $ARGUMENTS detectedFrameworks = [] }

Constraints

Always:

  • Detect which UI frameworks are in use before fetching documentation.
  • Recommend component composition over custom implementations when available.

Never:

  • Assume component APIs without consulting current documentation.
  • Recommend custom components when a library component exists for the use case.

References

  • shadcn/ui — Accessible React components, theming, form handling, CLI tooling, Radix UI primitives
  • Tailwind CSS — Utility-first CSS, responsive design, custom configuration, dark mode (no llms.txt available)

Workflow

1. Detect Framework Need

Identify which frameworks are relevant from the UI target. Fetch the corresponding reference documentation.

2. Synthesize Context

Combine fetched documentation into actionable guidance:

  • Available components and their APIs for the target use case.
  • Theming tokens and customization approach.
  • Accessibility features built into components.

3. Deliver Enriched Context

Provide framework-specific guidance integrated with the UI target.

レビュー

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

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Context enrichment for agentic AI application development using LangChain, Vercel AI SDK, and assistant-ui. Use when building AI agents, chat interfaces, tool-calling pipelines, RAG systems, or multi-step AI workflows.

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

rsmdt/the-startup5752026年10月25日 更新

analyze

無料

Deep-research analysis of a codebase, a topic, or both. Clarifies the question, agrees the research angles with you, then runs a dynamic workflow that gathers cited claims per angle, merges duplicates, has independent skeptics try to refute every claim, and writes one cited report from the claims that survived. Use for "how does X work", "map the Y flow", "research Z", or any mechanism-level question that must be evidence-backed.

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

rsmdt/the-startup5752026年10月25日 更新

REST and GraphQL API design patterns, OpenAPI/Swagger specifications, versioning strategies, and authentication patterns. Use when designing APIs, reviewing API contracts, evaluating API technologies, or implementing API endpoints.

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

rsmdt/the-startup5752026年10月25日 更新

System architecture patterns including monolith, microservices, event-driven, and serverless, with C4 modeling, scalability strategies, and technology selection criteria. Use when designing system architectures, evaluating patterns, or planning scalability.

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

rsmdt/the-startup5752026年10月25日 更新

archive

無料

Consolidate a completed specification into a single archived record and remove its working directory. Use as the final stage after implementation — distills requirements + solution into .start/archive/[NNN]-[name].md and deletes the .start/specs/[NNN]-[name]/ directory.

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

rsmdt/the-startup5752026年10月25日 更新

Required first step before any creative work — creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements, and design before implementation.

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

rsmdt/the-startup5752026年10月25日 更新

rsmdt のスキルをすべて見る

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