diff --git a/build.ts b/build.ts
index f3c5cd4..edd61f3 100644
--- a/build.ts
+++ b/build.ts
@@ -33,7 +33,7 @@ Example:
   process.exit(0);
 }
 
-const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1]!.toUpperCase());
 
 const parseValue = (value: string): any => {
   if (value === "true") return true;
@@ -48,7 +48,7 @@ const parseValue = (value: string): any => {
 };
 
 function parseArgs(): Partial<Bun.BuildConfig> {
-  const config: Partial<Bun.BuildConfig> = {};
+  const config: Record<string, unknown> = {};
   const args = process.argv.slice(2);
 
   for (let i = 0; i < args.length; i++) {
@@ -82,14 +82,16 @@ function parseArgs(): Partial<Bun.BuildConfig> {
 
     if (key.includes(".")) {
       const [parentKey, childKey] = key.split(".");
-      config[parentKey] = config[parentKey] || {};
-      config[parentKey][childKey] = parseValue(value);
+      if (parentKey && childKey) {
+        config[parentKey] = config[parentKey] || {};
+        (config[parentKey] as Record<string, unknown>)[childKey] = parseValue(value);
+      }
     } else {
       config[key] = parseValue(value);
     }
   }
 
-  return config;
+  return config as Partial<Bun.BuildConfig>;
 }
 
 const formatFileSize = (bytes: number): string => {
diff --git a/scripts/extract-step-definitions.ts b/scripts/extract-step-definitions.ts
index 76d0fea..52e15a5 100644
--- a/scripts/extract-step-definitions.ts
+++ b/scripts/extract-step-definitions.ts
@@ -60,8 +60,8 @@ function extractStepDefinitions(): StepDefinition[] {
 function extractFunctionBody(lines: string[], startLine: number): string {
   // Look for the closing }); which marks the end of a step definition
   for (let i = startLine; i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line === '});' || line.endsWith('});')) {
+    const line = lines[i]?.trim();
+    if (line === '});' || line?.endsWith('});')) {
       const extracted = lines.slice(startLine, i + 1);
       return extracted.join('\n');
     }
diff --git a/scripts/parse-features.ts b/scripts/parse-features.ts
index 4a91774..ad46258 100644
--- a/scripts/parse-features.ts
+++ b/scripts/parse-features.ts
@@ -58,7 +58,7 @@ function parseGherkinContent(content: string, filePath: string): ParsedFeature |
   let contentStartIndex = 0;
 
   for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
+    const line = lines[i]?.trim() ?? '';
     if (line.startsWith('#')) {
       contentStartIndex = i + 1;
       continue;
diff --git a/src/components/sketchy/Badge.tsx b/src/components/sketchy/Badge.tsx
index fe7a167..36f9ebd 100644
--- a/src/components/sketchy/Badge.tsx
+++ b/src/components/sketchy/Badge.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export function Badge({ children, className = '' }: BadgeProps) {
+export function Badge({ children, className = '', style }: BadgeProps) {
   return (
-    <span className={`sketchy-badge ${className}`}>
+    <span className={`sketchy-badge ${className}`} style={style}>
       {children}
     </span>
   );
diff --git a/src/components/sketchy/Card.tsx b/src/components/sketchy/Card.tsx
index 89d7c4c..1c8f66c 100644
--- a/src/components/sketchy/Card.tsx
+++ b/src/components/sketchy/Card.tsx
@@ -4,14 +4,15 @@ interface CardProps {
   children: React.ReactNode;
   className?: string;
   onClick?: () => void;
+  style?: React.CSSProperties;
 }
 
-export function Card({ children, className = '', onClick }: CardProps) {
+export function Card({ children, className = '', onClick, style }: CardProps) {
   return (
     <div
       className={`sketchy-card ${className}`}
       onClick={onClick}
-      style={onClick ? { cursor: 'pointer' } : undefined}
+      style={{ ...(onClick ? { cursor: 'pointer' } : {}), ...style }}
     >
       {children}
     </div>
diff --git a/src/components/sketchy/Placeholder.tsx b/src/components/sketchy/Placeholder.tsx
index e1c8fe1..ad919b3 100644
--- a/src/components/sketchy/Placeholder.tsx
+++ b/src/components/sketchy/Placeholder.tsx
@@ -5,18 +5,20 @@ interface PlaceholderProps {
   height?: string | number;
   label?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export function Placeholder({
   width = '100%',
   height = 100,
   label = 'Image',
-  className = ''
+  className = '',
+  style
 }: PlaceholderProps) {
   return (
     <div
       className={`sketchy-placeholder ${className}`}
-      style={{ width, height }}
+      style={{ width, height, ...style }}
     >
       {label}
     </div>
diff --git a/src/components/sketchy/Text.tsx b/src/components/sketchy/Text.tsx
index 6105687..0aaf33c 100644
--- a/src/components/sketchy/Text.tsx
+++ b/src/components/sketchy/Text.tsx
@@ -4,6 +4,7 @@ interface TextProps {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  onClick?: () => void;
 }
 
 export function Title({ children, className = '', style }: TextProps) {
@@ -14,6 +15,6 @@ export function Subtitle({ children, className = '', style }: TextProps) {
   return <h2 className={`sketchy-subtitle ${className}`} style={style}>{children}</h2>;
 }
 
-export function Text({ children, className = '', style }: TextProps) {
-  return <p className={`sketchy-text ${className}`} style={style}>{children}</p>;
+export function Text({ children, className = '', style, onClick }: TextProps) {
+  return <p className={`sketchy-text ${className}`} style={style} onClick={onClick}>{children}</p>;
 }