Frontend Design Router
code-yeongyu/oh-my-openagent
Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints.
Install Better Layout
$ npx skills add boraoztunc/skills --skill better-layout -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install boraoztunc/skills better-layout --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/better-layout .claude/skills/better-layout && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .claude/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/boraoztunc/skills/tree/main/better-layoutType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add boraoztunc/skills --skill better-layout -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install boraoztunc/skills better-layout --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/better-layout .agents/skills/better-layout && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .agents/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add boraoztunc/skills --skill better-layout -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install boraoztunc/skills better-layout --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/better-layout .cursor/skills/better-layout && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .cursor/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/boraoztunc/skills.git --path better-layout--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add boraoztunc/skills --skill better-layout -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install boraoztunc/skills better-layout --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/better-layout .gemini/skills/better-layout && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .gemini/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install boraoztunc/skills better-layoutInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add boraoztunc/skills --skill better-layout -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/better-layout .github/skills/better-layout && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .github/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add boraoztunc/skills --skill better-layout -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install boraoztunc/skills better-layout --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/better-layout .opencode/skills/better-layout && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "better-layout" agent skill from https://github.com/boraoztunc/skills/tree/main/better-layout into .opencode/skills/better-layout/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-layout", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
better-layout- GitHub stars
- 397
- Used in
- 1 other repo
- Token cost
- ~1.6k tokens
- SKILL.md length
- 760 words
- Files
- 4
- Skills in repo
- 52
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints.
- Works in 10 steps: Group with Space, Not Lines → Keep Controls Distinct from Content → Align to Shared Edges → …
- Structuring a page
- SKILL.md covers Quick Reference, Core Principles, Common Mistakes and Reporting
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Better Layout is an agent skill from boraoztunc/skills. Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area…
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `grouping-and-alignment.md`, `review-output.md` and `spacing-and-adaptivity.md`).
It sits in Frontend & Design, covering Responsive design and Frontend development. The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.
When your agent uses it
- Structuring a page
- Aligning controls
- Deciding what collapses at small sizes
- Handling RTL layout direction
Example prompts
- “/better-layout”
Workflow steps
10 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Better Layout loads about 1.6k tokens when it runs. Until then it costs about 150 tokens; SKILL.md has 760 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 760 words, ~1,553 tokens.
Download SKILL.mdSave it as
.claude/skills/better-layout/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- better-layout
- description
- Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.
Layout that communicates structure
Layout communicates before a single word is read: position, spacing, and alignment carry hierarchy on their own, and generous space beats decoration. A good layout also survives stress: resize it, translate it, mirror it for RTL, and it should still hold together. Apply these principles when building or reviewing UI code, and write every fix in the project's own idiom: the styling system already in use, never a second one alongside it.
Hit-area sizes and focus behavior are covered by the better-accessibility skill; visual polish (radius, shadows, animation) by the better-ui skill; line length and text spacing by the better-typography skill.
Treat the numeric values below as starting points for interfaces without an established density or spacing system. Preserve deliberate platform chrome, compact professional tools, and project tokens when they remain usable under hit-area, zoom, localization, and viewport stress tests.
Quick Reference
| Category | When to Use |
|---|---|
| Grouping & Alignment | Space vs separators, alignment edges, logical properties, importance ordering |
| Spacing & Adaptivity | Spacing between targets, layout margins, progressive disclosure, full-bleed content, breakpoints, i18n growth |
| Review Output Format | Severity scale, findings table, verification, verdict |
Core Principles
1. Group with Space, Not Lines
Negative space is the primary grouping tool; background shapes second; separator lines last, only where space alone can't carry the structure. The gap between groups must be at least 2× the gap within a group (8px intra-group → 16px+ inter-group), or the grouping reads as noise.
2. Keep Controls Distinct from Content
Interactive elements must look interactive: a background shape, a border, or a consistent placement zone. Never style a control identically to adjacent static text.
3. Align to Shared Edges
Pick alignment edges and stick to them; every stray edge reads as noise. Use one project spacing step for each level of subordination (16px is a useful default). Use logical properties (padding-inline-start, margin-inline-end) for direction-dependent layout; reserve physical left/right for genuinely physical geometry.
4. Order by Importance
The most important content sits near the top and the leading edge; reading order flows top-to-bottom, leading-to-trailing. Think in leading/trailing, not left/right.
5. Hint at Hidden Content
Progressive disclosure needs a visible affordance. Use the project's established cue; without one, let the next item peek 16–32px past the scroll edge or show a disclosure control. Content hidden with zero cue may as well not exist.
6. Breathing Room Between Targets
Without an established density system, start with 12px between adjacent bordered or filled controls and 24px of clearance around borderless text- and icon-only controls. Compact layouts may use less when better-accessibility hit areas do not overlap and the controls remain visually distinct.
7. Inset Buttons from the Edges
In content layouts, keep full-width buttons inside the layout margins (start near 16px inline on mobile) with a visible radius. Edge-to-edge actions are acceptable when they intentionally follow established platform or application chrome, account for safe areas, and remain distinguishable from system UI.
Show full SKILL.md (280 more words)Show less
8. Content Bleeds, Controls Float
Backgrounds and media extend to the viewport edges; controls and text stay inside the layout margins and safe areas (env(safe-area-inset-*)). Sticky chrome floats above the content layer, it doesn't dam it.
9. Hold Structure Until It Breaks
Breakpoints come from the content, not device presets. Keep the expanded layout as long as it genuinely fits and collapse late; prefer container queries for component-level adaptation. Test the smallest and largest sizes first.
10. Plan for Growth and Clipping
Plan for substantial and language-dependent string growth rather than relying on a universal percentage: no fixed widths or heights on text containers, and let rows wrap. Never park critical actions where resizing or scrolling clips them; keep them reachable in the normal flow or stable chrome appropriate to the product.
Common Mistakes
| Mistake | Fix |
|---|---|
| Separator line where spacing would do | Remove the line, double the gap between groups |
margin-left / padding-right in a localizable layout | margin-inline-start / padding-inline-end |
| Content-layout button accidentally touches the viewport | Inset within the project margins; preserve intentional platform chrome |
| Carousel/scroller that looks complete | Let the next item peek 16–32px past the edge |
| Adjacent controls merge or expanded hit areas overlap | Increase the gap using the project scale; use 12px/24px as starting points |
| Breakpoints at 768/1024 because they're the defaults | Break where the content actually stops fitting |
| Fixed-width text container sized to one language | max-width + wrapping; test pseudo-localization and representative locales |
| Primary action at the clip-prone bottom of a pane | Sticky positioning or stable chrome with safe-area padding |
Reporting
A standalone layout review is finished when every confirmed finding is reported in the format in review-output.md, with verification and a verdict. Under better-interface, its format governs instead.
© boraoztunc, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files in better-layout of boraoztunc/skills.
- SKILL.md
- grouping-and-alignment.md
- review-output.md
- spacing-and-adaptivity.md
Open the folder on GitHubat commit 645553c
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in boraoztunc/skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Better Layout next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Better Layout this skillboraoztunc/skills | 397 | 1 repos | ~1.6k | Automated safety check: Pass | Apache-2.0 | |
| Frontend Design Routercode-yeongyu/oh-my-openagent | 70k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Better LayoutLily-404/blog | 151 | 3 repos | ~1.5k | Automated safety check: Pass | None | |
| UI CraftMemTensor/memmy-agent | 2.1k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Frontend Design UltimateaAAaqwq/AGI-Super-Team | 105 | 2 repos | ~2.7k | Automated safety check: Pass | MIT |
Similar skills
Using Ouds Web Version Major Minor
Orange-OpenSource/Orange-Boosted-Bootstrap
Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.
Better Layout
Lily-404/blog
Layout structure for web interfaces. An agent skill from Lily-404/blog.
UI Craft
MemTensor/memmy-agent
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.
Frontend Design Ultimate
aAAaqwq/AGI-Super-Team
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.
Web Design Guidelines
ehmo/platform-design-skills
Web platform design and accessibility guidelines. An agent skill from ehmo/platform-design-skills.
More from boraoztunc/skills
All 52 skills in this repoGsap
boraoztunc/skills
GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.
Hyperframes
boraoztunc/skills
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
Remotion To Hyperframes
boraoztunc/skills
Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition.
Animejs
boraoztunc/skills
Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.
Beam Glow States
boraoztunc/skills
Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.
Minimal Zine Poster
boraoztunc/skills
Compile a theme, sentence, object, mood, article idea, or photo into a quiet Japanese/Korean zine-style editorial poster — tall aged paper, large negative space, one small image anchor, experimental…
Related
Categories
Questions about Better Layout
What does Better Layout do?
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Better Layout is an agent skill from boraoztunc/skills. Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints.
When should I use Better Layout?
Better Layout fits situations like: structuring a page; aligning controls; deciding what collapses at small sizes; handling RTL layout direction.
How do I install Better Layout in Claude Code?
Run `npx skills add boraoztunc/skills --skill better-layout -a claude-code`. Or copy the skill folder (better-layout in boraoztunc/skills) into .claude/skills/better-layout in your project. Claude Code loads it when a task matches its description.
How do I install Better Layout in Codex?
Run `npx skills add boraoztunc/skills --skill better-layout -a codex`. Or copy the skill folder (better-layout in boraoztunc/skills) into .agents/skills/better-layout in your project. Codex loads it when a task matches its description.
Can I use Better Layout in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boraoztunc/skills --skill better-layout -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/better-layout, .gemini/skills/better-layout, .github/skills/better-layout and .opencode/skills/better-layout in your project.
What does Better Layout need to run?
SKILL.md names no scripts, command-line tools or credentials: Better Layout is instructions for the agent only.
Does Better Layout access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Better Layout safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Better Layout use?
Better Layout is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Better Layout use?
About 1.6k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Better Layout?
Skills that share tags, products or a category with Better Layout: Frontend Design Router (code-yeongyu/oh-my-openagent, 70k stars), Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars), Better Layout (Lily-404/blog, 151 stars) and UI Craft (MemTensor/memmy-agent, 2.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Better Layout?
boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 397 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.
Source: boraoztunc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.