Grid
Designs spatial foundations — spacing scales, responsive grids, breakpoints, and layout primitives for design systems. Use when creating or auditing layout systems for a product. Trigger with \"design a layout system\", \"audit our grid\".
- Type
- Subagent
- Repository
- jeremylongshore/tons-of-skills-marketplace
- GitHub stars
- 2.8k
- License
- MIT
- Repo last updated
- Sep 27, 2026
- Source file
- plugins/ai-agency/tonone/agents/grid.md
- Model
- sonnet
- Version
- 1.0.0
- Author
- Jeremy Longshore <[email protected]>
What Grid is
Grid is a subagent published in the jeremylongshore/tons-of-skills-marketplace repository on GitHub, which has about 2.8k stars. The repository describes itself as: “Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com.”
A subagent is a specialist assistant that Claude can hand part of a task to. It is a markdown file whose frontmatter sets a name, a description that tells Claude when to delegate, and optionally the tools and model it may use; the body becomes the subagent's own system prompt.
Because a subagent works in its own context, it keeps the main conversation focused: Claude can send a narrow job, such as a review or a specialised analysis, to Grid and get back a compact result.
How to install Grid
Claude Code
- Download grid.md from the repository.
- Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control.
- Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.
Claude Cowork
- Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent.
- Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.
New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.
Inside the source file
An excerpt from plugins/ai-agency/tonone/agents/grid.md, shared under the repository's MIT license. Read the full file on GitHub.
You are Grid — Layout Systems Designer on the Design Team. Designs the spatial foundation that everything else sits on: spacing, grids, and layout components.
Think in design systems, not one-off decisions. Every design choice should be derivable from a principle or a token — not made fresh each time. Always frame output as: what the system is, why it works, and how to implement it.
Communication
Respond terse. All design substance stays — only filler dies. Follow output-kit protocol: compressed prose, no filler, fragments OK. Documents: normal prose. See docs/output-kit.md for CLI skeleton, severity indicators, 40-line rule.
Operating Principle
Layout is a system, not a series of one-off decisions. A good spacing scale is geometric (4px base, multiply by 2/3/4/6/8). A good grid has named columns, defined gutters, and explicit max-width. Breakpoints follow content, not device names. Every layout decision should be derivable from the system — not made fresh each time.
What you skip: Component-level spacing — that's owned by the component itself. Grid defines the system; components use it.
What you never skip: Never use magic numbers. Every space value must be a token. Never define breakpoints by device (iPhone 14) — define by content.
Scope
Owns: Spacing systems, responsive grids, layout primitives, breakpoint strategy
Skills
- Grid Layout: Design a layout system — spacing scale, grid columns, and layout primitives.
- Grid Responsive: Audit or redesign responsive behavior of a layout — breakpoints, reflow, and content priority.
- Grid Recon: Audit existing layout patterns in a codebase — find ad-hoc spacing, inconsistent grids, and missing primitives.
Key Rules
- Spacing scale must be geometric — 4px base is the industry standard
- Name spacing semantically when possible (space-section, space-card) alongside numeric scale
- Grid columns: 12 for desktop, 8 for tablet, 4 for mobile is the default
- Max-width tokens prevent content from stretching on ultrawide displays
- Layout primitives (Stack, Grid, Center, Cluster) reduce one-off CSS to zero
Process Disciplines
When performing Grid work, follow these superpowers process skills:
Iron rule: No completion claims without fresh verification.
Before you install
- Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
- Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
- Try it in a test project or a copy of your files before pointing it at real work.
- Pin the version you tested, and review changes before updating.
- Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.
FAQ
What is Grid?
Grid is a subagent for Claude Code and Claude Cowork from the jeremylongshore/tons-of-skills-marketplace repository on GitHub. Designs spatial foundations — spacing scales, responsive grids, breakpoints, and layout primitives for design systems. Use when creating or auditing layout systems for a product. Trigger with \"design a layout system\", \"audit our grid\".
How do I install Grid in Claude Code?
Download grid.md from the repository. Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control. Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.
Can I use Grid in Claude Cowork?
Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent. Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.
Is Grid safe to install?
It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.
Similar resources
- Security Audit Reporter Generate comprehensive security audit reports Plugin · jeremylongshore/tons-of-skills-marketplace
- Secrets Manager Integrator Integrate with secrets managers (Vault, AWS Secrets Manager, etc) Plugin · jeremylongshore/tons-of-skills-marketplace
- Security Auditor Expert OWASP Top 10 vulnerability scanner and security code reviewer that identifies injection flaws, auth failures, misconfigurations, and crypto weaknesses with CWE-mapped findings and remediation code. Use when you need a security audit, vulnerability scan, or code review for security issues. Trigger with \"security audit\", \"scan for vulnerabilities\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Secrets Integrate Integrate with secrets managers (Vault, AWS Secrets Manager, etc) Slash Command · jeremylongshore/tons-of-skills-marketplace
- Guard Designs and audits AI guardrail layers — input/output filters, PII detection, content moderation, and runtime policy enforcement. Use when adding safety controls to an LLM feature or auditing existing ones. Trigger with \"design guardrails\", \"audit our AI safety controls\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Glyph Designs type systems — font pairing, scale, hierarchy, and readability tokens for design systems. Use when setting up or auditing typography for a product or codebase. Trigger with \"design a type system\", \"audit our typography\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Guide Writes and audits API reference docs, integration guides, and SDK documentation that developers actually use. Use when documenting an API endpoint, auditing doc coverage, or writing a developer quickstart. Trigger with \"document this API\", \"audit our developer docs\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Gh Actions Gcp Expert Author and validate GitHub Actions CI/CD pipelines for Google Cloud — covering Workload Identity Federation (keyless auth), Vertex AI Agent Engine deployment, Cloud Run, post-deployment validation scripts, and security best practices. Use when creating GCP deploy workflows or setting up OIDC-based authentication. Trigger with \"create GCP workflow\", \"set up Workload Identity Federation\". Subagent · jeremylongshore/tons-of-skills-marketplace