Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/luizedupp/rememb/frontend-designnpx skills add LuizEduPP/Rememb --skill frontend-designgit clone --depth 1 https://github.com/LuizEduPP/RemembWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/luizedupp/rememb/frontend-design)<a href="https://agentmods.dev/skills/luizedupp/rememb/frontend-design"><img src="https://agentmods.dev/badge/skills/luizedupp/rememb/frontend-design.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00042 | $0.00840 |
| Opus 5 | $0.00021 | $0.00420 |
| Sonnet 5 | $0.00008 | $0.00168 |
| Haiku 4.5 | $0.00004 | $0.00084 |
Grade A, and why
frontend-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 79 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Modern Frontend Design (2027 Stack)
Create distinctive, high-performance frontend interfaces that completely avoid the generic, overused "AI-generated SaaS" aesthetic. Code must be semantic, cutting-edge, and ready for dynamic UI generation.
Design Thinking & Architecture
Before generating code, establish the architectural and aesthetic direction:
| Principle | Focus |
|---|---|
| Adaptability | Is this component fluid enough to be injected into any Generative UI context without breaking? |
| Tech Paradigm | Maximize modern CSS primitives (Container Queries, Nesting, Native Popover) over heavy JS libraries. |
| Signature | What unique layout, interaction, or micro-topography prevents this from looking like a standard Tailwind template? |
Tech-Driven Aesthetics Guidelines
Typography & Fluidity
- Use fluid typography via CSS
clamp()tied to container dimensions, not just the viewport. - Avoid system font fallbacks as a design choice; pair a highly characterful display font with a hyper-legible body font.
- Strict hierarchy using advanced font-metrics (like font-size-adjust) to prevent layout shifts.
Advanced Color Systems
- Mandatory
oklch(): Define all palettes usingoklch()for predictable, mathematically precise luminance and vibrant saturation across light/dark modes. - Avoid flat hex/rgb gradients. Use multi-stop interpolation and non-linear color transitions.
Motion & Interactions (Native First)
- View Transitions API: Use native view transitions for seamless state changes and page-level morphing.
- Scroll-driven Animations: Implement native CSS
@scroll-timelineorscroll()functions for scroll-triggered effects instead of heavy JS engines. - Micro-interactions must feel tactile: dynamic spring physics for hovers and active states.
Layout & Componentization
- Container Queries First: Component styles must rely strictly on
@containerrules so they render perfectly regardless of where the AI or the user places them on the screen. - Move beyond basic Bento Grids. Use asymmetric layouts, intentional overlaps, CSS Grid subgrids, and variable density.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 79 lines · 42 tokens per session scan A 9d98969fddfd
frontend-design is a skill published in the GitHub repository LuizEduPP/Rememb (4 stars, last pushed 1mo ago), licensed MIT. It adds 42 tokens to every session and 840 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design
Use for UI, UX, visual hierarchy, frontend-design judgment, references, redesigns, and design critique when the user's Emulo taste should guide the task. Do not use for unrelated execution or marketing/social writing alone.
dashboard-experience-review
Review the agents-remember cockpit dashboard like a user: discover the intended workflow scenarios, detect missing views and where users get stuck, and judge whether the UI is self-explanatory at a glance / leads the user / progressively discloses / has clear hierarchy / is a good observability surface. Conducts the…
jumbo-design-goal
Pre-definition collaborative discovery. Aligns a proposed goal with project audience, pains, and value propositions; surfaces design gaps and open questions before handing off to define-jumbo-goals.
ui-ux-design
Designing, building, reviewing, or restyling any interface (site, landing page, dashboard, component, app), or diagnosing why a design doesn't convert.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
ui-ux-pro-max
UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing…