frontend-mobile-development-component-scaffold
Generates production-ready React components with TypeScript, ensuring accessibility and performance for web and mobile applications.
Install this skill
Security score
The frontend-mobile-development-component-scaffold skill was audited on Feb 28, 2026 and we found 25 security issues across 1 threat category. Review the findings below before installing.
Categories Tested
Security Issues
Template literal with variable interpolation in command context
| 98 | return `${imports}\n\n${types}\n\n${component}\n\n${exports}`; |
Template literal with variable interpolation in command context
| 105 | imports.push(`import styles from './${spec.name}.module.css';`); |
Template literal with variable interpolation in command context
| 120 | const comment = p.description ? ` /** ${p.description} */\n` : ''; |
Template literal with variable interpolation in command context
| 121 | return `${comment} ${p.name}${optional}: ${p.type};`; |
Template literal with variable interpolation in command context
| 124 | return `export interface ${spec.name}Props {\n${props}\n}`; |
Template literal with variable interpolation in command context
| 128 | const propsType = options.typescript ? `: React.FC<${spec.name}Props>` : ''; |
Template literal with variable interpolation in command context
| 131 | let body = `export const ${spec.name}${propsType} = ({ ${destructuredProps} }) => {\n`; |
Template literal with variable interpolation in command context
| 136 | ` const [${s.name}, set${this.capitalize(s.name)}] = useState${options.typescript ? `<${s.type}>` : ''}(${s.initial});\n` |
Template literal with variable interpolation in command context
| 145 | body += ` }, [${destructuredProps}]);\n\n`; |
Template literal with variable interpolation in command context
| 151 | body += ` role: '${this.inferAriaRole(spec.type)}',\n`; |
Template literal with variable interpolation in command context
| 152 | body += ` label: ${spec.props.find(p => p.name === 'label')?.name || `'${spec.name}'`}\n`; |
Template literal with variable interpolation in command context
| 166 | const className = spec.styling === 'css-modules' ? `className={styles.${this.camelCase(spec.name)}}` : ''; |
Template literal with variable interpolation in command context
| 169 | return ` <div ${className} ${a11y}>\n` + |
Template literal with variable interpolation in command context
| 181 | return ` |
Template literal with variable interpolation in command context
| 192 | ${spec.props.map(p => ` ${p.name}${p.required ? '' : '?'}: ${this.mapNativeType(p.type)};`).join('\n')} |
Template literal with variable interpolation in command context
| 243 | return ` |
Template literal with variable interpolation in command context
| 249 | ${spec.props.filter(p => p.required).map(p => ` ${p.name}: ${this.getMockValue(p.type)},`).join('\n')} |
Template literal with variable interpolation in command context
| 271 | });`).join('\n')} |
Template literal with variable interpolation in command context
| 299 | return ` |
Template literal with variable interpolation in command context
| 322 | return ` |
Template literal with variable interpolation in command context
| 325 | export const ${spec.name}Container = styled.div\` |
Template literal with variable interpolation in command context
| 330 | \`; |
Template literal with variable interpolation in command context
| 332 | export const ${spec.name}Title = styled.h2\` |
Template literal with variable interpolation in command context
| 357 | return ` |
Template literal with variable interpolation in command context
| 366 | ${spec.props.map(p => ` ${p.name}: { control: '${this.inferControl(p.type)}', description: '${p.description}' },`).join('\n')} |