thkt/applying-frontend-patterns
skills/applying-frontend-patterns/SKILL.md
Framework-agnostic frontend component design patterns. Use when: component patterns, Container/Presentational, フロントエンドパターン, コンポーネント設計.
$ install --global
skillsauthnpx skillsauth add thkt/claude-config applying-frontend-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 9:27 AM10.3s2 files scanned
SKILL.md
- name:
- applying-frontend-patterns
- description:
- >
- Framework-agnostic frontend component design patterns. Use when:
- component
- allowed-tools:
- [Read, Grep, Glob, Task]
- user-invocable:
- false
Frontend Patterns
Core Patterns
| Pattern | When to Use | | ------------------------ | ----------------------- | | Container/Presentational | Data fetching + display | | Custom Hooks | Shared behavior | | Composition | Flexible components | | State Management | Local → Shared → Global |
Container/Presentational
| Container (Logic) | Presentational (UI) | | ----------------- | ----------------------- | | Fetches data | Receives data via props | | Manages state | Stateless (ideally) | | Handles events | Calls callback props | | No styling | All styling lives here |
State Management
| Scope | Tool | Example | | ------ | ------------- | ------------------ | | Local | useState | Form input, toggle | | Shared | Context | Theme, auth status | | Global | Zustand/Redux | App-wide cache |
When NOT to Use
Simple one-off components, prototypes (YAGNI), no reuse expected.
References
| Topic | File |
| ---------------------- | ------------------------------------------------------------ |
| Container/Presentation | ${CLAUDE_SKILL_DIR}/references/container-presentational.md |
Related Skills
thkt/outcome
documentation
VerifiedTrustedCommunity
Generates and updates .claude/OUTCOME.md interactively. When the file is absent or empty (no Behavior / all sections TBD), collects content via AskUserQuestion and writes the stub; when present, shows the current state and applies updates.
9SKILL.mdUpdated Jun 12, 2026
thkt/audit-skill-craft
development
VerifiedTrustedCommunity
Judge a SKILL.md against craft axes (single responsibility, description distinctiveness, imperative voice, verifiable completion, calibration, progressive disclosure) and apply the fixes the audit surfaces. Do not use for format-presence-only checks (use reviewer-prompt) or reproducibility loops (use /tuning).
9SKILL.mdUpdated Jun 11, 2026
thkt/use-workflow-plan-preview
tools
VerifiedTrustedCommunity
Internal helper for /think Step 11. Renders SOW.md + Spec.md as an integrated Astro view and returns a dev server URL.
9SKILL.mdUpdated Jun 1, 2026
thkt/probe
development
VerifiedTrustedCommunity
Extract repository spec while detecting bugs, spec gaps, and consistency drift via dual-purpose documentation. OUTCOME.md-axis question-driven exploration with ephemeral output. Do NOT use for code review (use /audit or /polish), feature implementation (use /code), planning only (use /think), or single-bug fix (use /fix).
9SKILL.mdUpdated Jun 1, 2026