nghyane/vstep/layout-patterns
Claude Code and agent skill by nghyane/vstep
Trust tier 3
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.
Install
npx vskill@latest install nghyane/vstep/layout-patternsSKILL.md
Layout Patterns
App shell
src/routes/_app.tsx— sidebar + outlet, auth guard via useEffect- Sidebar:
src/components/Sidebar.tsx— 260px fixed, icon alignment via w-8 h-6 container - Header:
src/components/Header.tsx— page title + gem/streak/avatar + ProfileDropdown
Content width
- Dashboard: full width
- Reading/form: max-w-3xl or max-w-2xl
- Focus mode: max-w-lg centered
Focus mode
- Layout route:
src/routes/_focused.tsx— no sidebar, no header - Shared components:
FocusBar(progress + close),FocusComplete,FocusEmpty BackLinktype for navigation props- Used for: flashcard SRS, exercises, exams
Security
- Security scanPassed, 90 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingapps/frontend-v3/.agents/skills/layout-patterns/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/nghyane/vstep/layout-patterns)