applying-frontend-patterns
Framework-agnostic frontend component design patterns.
Best use case
applying-frontend-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Framework-agnostic frontend component design patterns.
Teams using applying-frontend-patterns should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/applying-frontend-patterns/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How applying-frontend-patterns Compares
| Feature / Agent | applying-frontend-patterns | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Framework-agnostic frontend component design patterns.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# フロントエンドパターン ## コアパターン | パターン | 使用タイミング | | ------------------------ | ---------------------------- | | Container/Presentational | データ取得 + 表示 | | カスタムフック | 共有する振る舞い | | コンポジション | 柔軟なコンポーネント | | 状態管理 | ローカル → 共有 → グローバル | ## Container/Presentational | Container（ロジック） | Presentational（UI） | | --------------------- | -------------------------- | | データを取得 | propsでデータを受け取る | | 状態を管理 | ステートレス（理想） | | イベントを処理 | コールバックpropsを呼ぶ | | スタイリングなし | すべてのスタイリングがここ | ## 状態管理 | スコープ | ツール | 例 | | ---------- | ------------- | ---------------------- | | ローカル | useState | フォーム入力、トグル | | 共有 | Context | テーマ、認証状態 | | グローバル | Zustand/Redux | アプリ全体のキャッシュ | ## 使わないとき シンプルな一回限りのコンポーネント、プロトタイプ（YAGNI）、再利用が期待されない。 ## 参考 | トピック | ファイル | | ------------------------ | ---------------------------------------- | | Container/Presentational | `references/container-presentational.md` |
Related Skills
applying-fsd-architecture
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.
applying-clean-code
General syntax and naming rules to keep the codebase maintainable. Use for all code generation.
application-patterns
Common application development patterns and implementations
apollo-server-patterns
Use when building GraphQL APIs with Apollo Server requiring resolvers, data sources, schema design, and federation.
api-patterns
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
api-design-patterns
Design robust APIs with RESTful patterns, GraphQL schemas, versioning strategies, and error handling conventions. Supports OpenAPI/Swagger documentation and SDK generation patterns. Triggers on API design, schema definition, endpoint architecture, or developer experience requests.
Apex Enterprise Patterns
This skill should be used when the user asks to "create apex class", "write apex code", "implement service layer", "domain pattern", "selector pattern", "apex security", "bulkification", or mentions DRY, SOLID, or TDD principles for Apex. Provides framework-agnostic enterprise patterns for Apex development.
antigravity-frontend-dev
Antigravity/Claude specific skill for continuous frontend UI/UX improvement and development in the Juliaz Agents project.
anthropic-streaming-patterns
Use when integrating Claude API with streaming responses, implementing tool execution in streams, tracking API costs, or encountering streaming errors - provides Anthropic SDK 0.30.1+ patterns with mandatory cost monitoring
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
angreal-patterns
This skill should be used when the user asks to "test angreal tasks", "mock angreal", "document tasks", "angreal best practices", "error handling in tasks", "subprocess patterns", "dry run mode", "verbose mode", or needs guidance on testing patterns, development workflows, documentation strategies, or common implementation patterns for angreal tasks.
analyzing-text-patterns
Extract and analyze recurring patterns from log messages, span names, and event names using punctuation-based template discovery. Use when you need to understand log diversity, identify common message structures, detect unusual formats, or prepare for log parser development. Works by removing variable content and preserving structural markers.