writing-page-layout
Use this skill when you need to write code for a page layout in the Next.js
Best use case
writing-page-layout is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Use this skill when you need to write code for a page layout in the Next.js
Use this skill when you need to write code for a page layout in the Next.js
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "writing-page-layout" skill to help with this workflow task. Context: Use this skill when you need to write code for a page layout in the Next.js
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/writing-page-layout/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How writing-page-layout Compares
| Feature / Agent | writing-page-layout | 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?
Use this skill when you need to write code for a page layout in the Next.js
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
# Instructions - Follow the rules below to write a page layout (`page.tsx`) in the Next.js app: ## Rules - Make it modular - Maximum of 40 lines of code per page layout - Seperate the types and interfaces in a separate file (`srs/app/types`)
Related Skills
user-guide-writing
Write clear and helpful user guides and tutorials for end users. Use when creating onboarding docs, how-to guides, or FAQ pages. Handles user-focused documentation, screenshots, step-by-step instructions.
technical-writing
Write clear, comprehensive technical documentation. Use when creating specs, architecture docs, runbooks, or API documentation. Handles technical specifications, system design docs, operational guides, and developer documentation with industry best practices.
wiki-page-writer
Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating technical deep-dives, or documenting specific components or systems.
postmortem-writing
Write effective blameless postmortems with root cause analysis, timelines, and action items. Use when conducting incident reviews, writing postmortem documents, or improving incident response processes.
plan-writing
Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.
pagerduty-automation
Automate PagerDuty tasks via Rube MCP (Composio): manage incidents, services, schedules, escalation policies, and on-call rotations. Always search tools first for current schemas.
hig-components-layout
Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about sidebar, split view, tab bar, tab view, scroll view, window design, panel, list view, table view, column view, outline view, navigation structure, app layout, boxes, ornaments, or organizing content hierarchically in Apple apps. Also use when the user says how should I organize my app, what navigation pattern should I use, my layout breaks on iPad, how do I build a sidebar, should I use tabs or a sidebar, or my app doesn't adapt to different screen sizes. Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.
avalonia-layout-zafiro
Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.
technical-blog-writing
Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tutorial, technical content
writing-lib-functions
Use this skill when you need to write lib functions in `srs/lib` for the Next.js app
writing-data
Use this skill when you need to structure data in `srs/data` for the Next.js app
writing-config-files
Use this skill when you need to write configuration files in `src/config` for the Next.js app