Skip to content
skillsafebeta
← Report library
Purpose / Other

Design Taste Frontend V1 Skill Security Audit

What the author says it does (original text)

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Independent security check

Security risks found

Files checked
1
Risks found
4
Could it run dangerous commands?Looks for programs run straight after downloading, remote control of your computer, and hidden commands.Risks found: 1
Low risk

Suggested dependency commands modify the project and may run package lifecycle scripts

Source references: 1
What we found

The Skill requires outputting an npm install command when a dependency is absent. If run, npm normally changes dependency manifests and lockfiles and may execute lifecycle scripts from the package or its transitive dependencies. The instructions do not require version pinning, provenance review, or an ignore-scripts mode.

Why this matters

Running the suggestion persistently changes project dependencies. If an incorrect, compromised, or untrusted package version is resolved, installation code can run with the user's permissions. The material does not itself execute a command and provides no evidence that the named packages are malicious.

The Skill only requires outputting an install command and does not execute it itself; the risk depends on the user running it. Running the example `npm install package-name` normally changes dependency metadata and the lockfile and may execute npm package installation lifecycle scripts. No exact version or script policy is specified. The user can first review the package name, source, version, and transitive dependencies and require a workflow that does not automatically run scripts.

SKILL.md:18In the instructionsOpen original file
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
Could it expose your files or keys?Looks for uploads of files containing passwords or keys, and keys written directly in the code.Risks found: 1
Medium risk

Generated pages may disclose visitor network metadata to Picsum

Source references: 1
What we found

The Skill explicitly recommends embedding a third-party Picsum URL as an image placeholder. When a browser renders the page, it contacts that domain and exposes the visitor's IP address, request headers, and potentially referrer information under the browser's policy; the third party also controls the image response.

Why this matters

Each visitor to a deployed page may contact an unexpected external service, creating privacy, compliance, content-stability, and third-party-availability risks.

The instruction explicitly recommends a remote picsum.photos image URL in generated pages. If a visitor loads the page and the image is not proxied or localized, the browser requests it from that third party, exposing connection data such as the IP address; the provider also controls the returned image. The user can require local assets, an approved host, or an image proxy with a strict referrer policy.

SKILL.md:124In the instructionsOpen original file
### External Resources & Components* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
Could it delete files or keep running?Looks for broad file deletion, disk overwrites, and programs set to start automatically.No risks found
Could it bypass safety checks?Looks for skipped website security checks, excessive file access, or actions that skip your approval.Risks found: 2
Medium risk

Mandatory infinite animation may override visitors' reduced-motion preference

Source references: 5
What we found

The Skill requires every card to have an infinitely looping active state and makes perpetual micro-animation a default, but its checklist does not require honoring prefers-reduced-motion or providing a stop control. Component isolation may reduce rerenders but does not address motion sensitivity or user control.

Why this matters

Generated interfaces may continuously consume CPU and battery and may be difficult or unsafe to use for motion-sensitive visitors.

This is active default behavior: the baseline motion level is 6, which triggers continuous infinite animation, and every Bento card is required to loop. The supplied material provides no corresponding reduced-motion condition or off control, so generated pages may disregard visitors' motion preferences and cause discomfort. Component isolation addresses performance only. The user can require `prefers-reduced-motion`, pausing nonessential animation, and a toggle.

SKILL.md:203In the instructionsOpen original file
### B. The Animation Engine Specs (Perpetual Motion)All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.* **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
Show 4 other places
SKILL.md:218In the instructionsOpen original file
## 10. FINAL PRE-FLIGHT CHECKEvaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?- [ ] Do `useEffect` animations contain strict cleanup functions?- [ ] Are empty, loading, and error states provided?- [ ] Are cards omitted in favor of spacing where possible?- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?
SKILL.md:10In the instructionsOpen original file
* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
SKILL.md:70In the instructionsOpen original file
* **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.* **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.* **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.
SKILL.md:204In the instructionsOpen original file
### B. The Animation Engine Specs (Perpetual Motion)All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.* **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
Low risk

The install command does not pin a dependency version

Source references: 1
What we found

The installation command does not specify dependency versions. The same command may download different code later, so what you install can differ from what was checked.

Why this matters

A later install may download different code even though the command and this report have not changed.

The instruction requires emitting an example install command with no version. Installation occurs only if the user runs it; the resolved version may change over time, so the reviewed material does not identify the exact code installed later. The user can ask for a reviewed exact version and lockfile.

SKILL.md:18In the instructionsOpen original file
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
Could it mislead the AI or hide text?Checks the skill instructions for requests to ignore you, influence the report, or hide text in invisible characters.No risks found
Could it change links or payment recipients without asking?Looks for forced referral or payment changes combined with instructions to hide the change.No risks found

Inside this skill

8 instruction sections

This Skill is a set of frontend-generation rules. It defaults to React/Next.js and Tailwind and requires checking package.json before referencing third-party libraries. The supplied material contains no executable scripts and no instruction to directly read credentials, accounts, or user files.

View source
SKILL.md:18In the instructionsOpen original file
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).     * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.    * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.* **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.* **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.     * **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.     * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.

The defaults drive highly asymmetric, continuously animated, relatively low-density interfaces, while explicit user requests are supposed to override those values.

View source
SKILL.md:9In the instructionsOpen original file
## 1. ACTIVE BASELINE CONFIGURATION* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

It outputs installation commands when dependencies are absent and may recommend Framer Motion, GSAP, or ThreeJS for complex animation. The material does not instruct the agent to execute those commands itself.

View source
SKILL.md:18In the instructionsOpen original file
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
SKILL.md:129In the instructionsOpen original file
## 8. THE CREATIVE ARSENAL (High-End Inspiration)Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.
Start here · InstructionsSKILL.md
design-taste-frontend-v1
Lines connect the instruction file to its sections, not an observed execution order. Select a section to read the source. 2 more sections are available in the original file.
Files and check records1 files

Coverage and gaps

Content covered in each file

These are the source ranges included in this check, not a guarantee that every issue has been resolved.

  • SKILL.mdFull text included

This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.

  • SKILL.mdInstructions

Operations mentioned in code and instructions

Install extra software packages
SKILL.md:18In the instructionsOpen original file
* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
Connect to websites
SKILL.md:124In the instructionsOpen original file
### External Resources & Components* **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
Lines read
227
File checksum (to compare versions)
f17ac20d1c47504b957e6a9f8f906ebec8745a6e676d01a975acc3b026bc3909