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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/luizedupp/rememb/frontend-design"><img src="https://agentmods.dev/badge/skills/luizedupp/rememb/frontend-design.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00042 | $0.00840 |
| Opus 5.5 | $0.00017 | $0.00336 |
| Sonnet 5.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 1mo 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.
- 1mo ago First seen · 79 lines · 42 tokens per session scan A 9d98969fddfd
frontend-design is a skill published in the GitHub repository LuizEduPP/Rememb (5 stars, last pushed 15d ago), licensed MIT. It adds 42 tokens to every session and 840 once invoked, about $0.0002 per session on Opus 5.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
pn-animation
Motion roles (Reveal/Orient/Confirm/Delight) and budgets. Use when designing or auditing a motion system — load pn-gsap for GSAP API.
pn-color-system
Color system design and implementation: OKLCH color space, tinted neutrals, palette structure, contrast, dark mode architecture, and token hierarchy. Use when establishing color tokens, theming, dark mode, or reviewing color choices.
pn-design-system
Establishes or maintains a design system: tokens, CSS variables, spacing/type scales, theming, and consistency auditing. Use when defining tokens or auditing components. The pn-design-system rule enforces token usage when editing CSS/SCSS files.
nightmarquee-aetheris-voyage
Aetheris Voyage: Dream-travel hero with a slow ink-navy nebula and a coral dawn. A full-viewport hero for a fictional dream-travel brand. A conic-gradient nebula slowly rotates behind an ultra-wide, letter-spaced headline in moon-paper white, a faint coral dawn low on the horizon. Nav, headline and CTA stagger in on…
nightmarquee-fieldnote
Fieldnote: A hand-drawn SaaS where the diagrams sketch themselves. A diagram notebook landing on cream paper: scroll scrubs a fountain pen finishing its ink line while a corner sketch draws itself in step with the film. Below it every illustration inks itself in as it enters view, margin notes ring a real product…
nightmarquee-glasshouse-nine
Glasshouse Nine: Walk into the glasshouse as you scroll. A nursery landing with an honest heartbeat: the hero drifts you through ferns and misted Victorian glass, the bench list shows live counts and keeps sold-out plants visible with their re-rooting dates, and pointing at any row floats a photo of the actual plant.…