frontend-layout

When shaping or reviewing a frontend's spatial structure—grouping and aligning content, setting reading order, adapting a component to its container, or…

Skill by bryan824

IndexedMIT

Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/bryan824-frontend-layout

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

About

When shaping or reviewing a frontend's spatial structure—grouping and aligning content, setting reading order, adapting a component to its container, or keeping a layout intact under RTL and localization stress.

Use cases: frontend, writing

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools: No tools found
Secrets: None asked for
Install scripts: None found

Network hosts it talks to 1

codeload.github.com · found in install command

Files it touches

~/.claude/skills/frontend-layout

What's inside

Skill name: frontend-layout
Description: When shaping or reviewing a frontend's spatial structure—grouping and aligning content, setting reading order, adapting a component to its container, or keeping a layout intact under RTL and localization stress.
License: MIT
Instructions: 30 lines in SKILL.md · view on GitHub

Files (2)

REFERENCE.md
SKILL.md

SKILL.md (first lines)

# Frontend Layout

**Make structure survive stress.** Space, shared edges, and source order should
still explain the interface after content grows, direction changes, or a lane
narrows; decoration cannot repair a broken relationship.

- Group related material with proximity, align it to a small set of shared
  logical edges, and keep DOM order aligned with reading and interaction order.
  Demote secondary detail through a visible progressive-disclosure cue rather
  than hiding its existence.
- Let content set adaptive breakpoints. Prefer container-driven adaptation for
  components; preserve the established density and use safe-area-aware stable
  chrome when controls meet a viewport edge.
- Treat leading/trailing as directional: use logical properties and test RTL;
  reserve physical sides for genuinely physical geometry. Leave room for
  translation and content growth instead of sizing lanes for their English copy.
- Give every flex, grid, card, table, and control lane a shrink/reflow contract.
  Stress narrow lanes with long localized names, money, IDs, and labels: content
  must not bleed into an adjacent lane or hide a critical action. Layout owns
  the lane; `frontend-typography` owns the text policy within it.

For selected edge cases, read [REFERENCE.md](REFERENCE.md).

When `frontend-design` is installed, use its
[shared review contract](../frontend-design/references/REVIEW.md). Otherwise report
focused layout findings, exact evidence, user impact and verification gaps directly.
Review-only requests stay read-only; do not install siblings or duplicate the full
review schema.

From bryan824/kirin-pi, MIT.

Signals

Stars: 0
Forks: 0
Open issues: 0
Last commit (this folder): Oct 1, 2026 (28 days ago)

From GitHub (fetched Oct 24, 2026).

Details

License: MIT
Repository: github.com/bryan824/kirin-pi
First seen: Oct 24, 2026
Last checked: Oct 24, 2026
Source: GitHub github-graphql

More from bryan824

Cite this page

frontend-layout skill. Agent Mart. https://agentmart.dev/skills/bryan824-frontend-layout (last updated 2026-10-24)