前端设计敏感数据github未标认证来源可访问许可证需确认审计通过

general-frontend-security（通用前端安全）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

339

周安装

GitHub Stars

公开资料未说明

下载量

111

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：general-frontend-security（通用前端安全）
来源仓库：https://github.com/lennetech/claude-code
仓库路径：skills/general-frontend-security
安装命令：
npx skills add https://github.com/lennetech/claude-code --skill general-frontend-security
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/lennetech/claude-code --skill general-frontend-security

简介

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。

适合生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码。
使用时需要结合项目现有设计系统、路由和构建方式，避免孤立片段。
涉及页面改动时应配合本地预览和构建检查确认视觉效果。
建议结合原始 README 核验具体用法和功能边界。

SKILL.md

General Frontend Security

Framework-agnostic security practices for web applications based on OWASP guidelines.

When to Use This Skill

Reviewing frontend code for security vulnerabilities
Implementing client-side authentication flows
Setting up secure cookie handling
Configuring Content Security Policy
Auditing third-party dependencies
General frontend security questions

Skill Boundaries

User Intent	Correct Skill
"XSS prevention best practices"	THIS SKILL
"Security audit of frontend"	THIS SKILL
"Configure CSP headers"	THIS SKILL
"Build a secure login page in Nuxt"	developing-lt-frontend
"Fix @Restricted decorator in NestJS"	generating-nest-servers
"Run npm audit fix"	maintaining-npm-packages

Related Skills & Commands

Command	Purpose
`/lt-dev:review`	General security review of branch diff (framework-agnostic)
`/lt-dev:backend:sec-review`	Security review of backend code changes (auth, decorators, models)
`/lt-dev:backend:sec-audit`	Full OWASP security audit (dependencies, config, code)

Framework-Specific References

Framework	Reference File
Nuxt/Vue	See `developing-lt-frontend` skill (reference/security.md)
Angular	angular-security.md

Key Principles

Never trust client-side validation - Server must always verify
Store tokens securely - Memory for access tokens, httpOnly cookies for refresh tokens
Prevent XSS - Never use innerHTML with user input; use textContent or DOMPurify
Protect against CSRF - Use CSRF tokens for state-changing requests + SameSite cookies
Configure CSP - Restrict script/style sources, use nonces, block framing
Minimize dependencies - Fewer deps = smaller attack surface; always run pnpm audit

Complete OWASP reference with code examples: owasp-reference.md

Security Checklist

Development

No sensitive data in client-side code
Environment variables separated (public vs private)
Input validation on all user inputs
XSS prevention (no innerHTML with user data)
CSRF tokens for state-changing requests

Authentication

Tokens stored securely (memory + httpOnly cookies)
Token refresh mechanism implemented
Proper logout (clear all client state)
Session timeout configured

Configuration

HTTPS enforced
CSP headers configured
Security headers set (X-Frame-Options, etc.)
Cookies configured with secure flags
CORS properly restricted

Dependencies

pnpm audit clean (or accepted risks)
pnpm-lock.yaml committed
SRI for external resources
Regular dependency updates

Build & Deploy

Debug mode disabled
Console logs removed
Source maps disabled or restricted
Error messages generic (no stack traces)

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

31.69%

按下载量换算35

Claude

31.42%

按下载量换算35

Cursor

18.9%

按下载量换算21

Gemini CLI

8.76%

按下载量换算10

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置，应进入高风险复核队列，默认不自动发布。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/lennetech/claude-code

SKILL.md 来源

github.com

/lennetech/claude-code/tree/main/skills/general-frontend-security

skills-sh

skills.sh

/lennetech/claude-code/general-frontend-security

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

gen-specs-as-issues（一代规格有问题）

用于围绕 GitHub 仓库、Issue、Pull Request、分支、提交和代码协作流程提供辅助能力。它适合让 Agent 查询项目状态、整理变更、辅助创建或检查协作事项，并把仓库中的信息转成可执行的下一步。使用时需要区分只读查询和写入操作；涉及创建 PR、修改 Issue、推送分支或访问私有仓库时，应确认 token 权限、目标仓库范围和用户授权。

下一个 Skill

generate（generate 测试）

generate 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。