designing-layouts
Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.
Skill by hongmaple0820
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/hongmaple0820-designing-layouts
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
Use cases: design
Reviews
Write a reviewNo 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
- Runs as
- Node.js package
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/designing-layouts
What's inside
- Skill name
designing-layouts- Description
- Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page structures.
- License
- NOASSERTION
- Instructions
- 263 lines in SKILL.md · view on GitHub
Before installing
- Ships executable scripts
Files (18)
- SKILL.md
- breakpoint-config.json · assets/
- layout-templates.json · assets/
- spacing-scale.json · assets/
- admin-layout.tsx · examples/
- masonry-layout.tsx · examples/
- responsive-grid.tsx · examples/
- split-pane.tsx · examples/
- outputs.yaml
- accessibility-layouts.md · references/
- css-techniques.md · references/
- layout-patterns.md · references/
- library-guide.md · references/
- performance-optimization.md · references/
- responsive-strategies.md · references/
- calculate_fluid_typography.js · scripts/
- generate_breakpoints.js · scripts/
- validate_layout_accessibility.js · scripts/
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from hongmaple0820/agent-academy
- 0.477score
visualizing-data
hongmaple0820
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
designing-apis
hongmaple0820
Design APIs that are secure, scalable, and maintainable using RESTful, GraphQL, and event-driven patterns.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
creating-dashboards
hongmaple0820
Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
building-tables
hongmaple0820
Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
hugging-face-trackio
hongmaple0820
Track and visualize ML training experiments with Trackio.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
hugging-face-cli
hongmaple0820
Execute Hugging Face Hub operations using the `hf` CLI.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
building-forms
hongmaple0820
Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
implementing-search-filter
hongmaple0820
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration.
SkillDFreshness: D★ 11Claude Code +9 - 0.474score
daily-review
hongmaple0820
每日复盘技能，在每天结束时进行系统性回顾。触发词：每日复盘、日复盘、今日复盘、daily review、今日总结。自动归档到 memory/ 目录形成永久记忆，支持定时触发和手动触发。首次使用请阅读 REVIEW_STANDARDS.md 学习复盘规范。
SkillDFreshness: D★ 11Claude Code +9 - 0.472score
cosmos-vulnerability-scanner
hongmaple0820
Scans Cosmos SDK blockchains for 9 consensus-critical vulnerabilities including non-determinism, incorrect signers, ABCI panics, and rounding errors.
SkillDFreshness: D★ 11Claude Code +9 - 0.472score
code-maturity-assessor
hongmaple0820
Systematic code maturity assessment using Trail of Bits' 9-category framework.
SkillDFreshness: D★ 11Claude Code +9 - 0.472score
guidelines-advisor
hongmaple0820
Smart contract development advisor based on Trail of Bits' best practices.
SkillDFreshness: D★ 11Claude Code +9
Signals
- Stars
- 11
- Forks
- 2
- Open issues
- 0
- Last commit (this folder)
- Mar 12, 2026 (7 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- NOASSERTION
- Repository
- github.com/hongmaple0820/agent-academy
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from hongmaple0820
- 0.477score
implementing-search-filter
hongmaple0820
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
building-forms
hongmaple0820
Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
hugging-face-cli
hongmaple0820
Execute Hugging Face Hub operations using the `hf` CLI.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
hugging-face-trackio
hongmaple0820
Track and visualize ML training experiments with Trackio.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
visualizing-data
hongmaple0820
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics.
SkillDFreshness: D★ 11Claude Code +9 - 0.477score
building-tables
hongmaple0820
Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.
SkillDFreshness: D★ 11Claude Code +9
Cite this page
designing-layouts skill. Agent Mart. https://agentmart.dev/skills/hongmaple0820-designing-layouts (last updated 2026-10-24)